突出显示 ChartJS 中上次单击的条形图

Question

我正在尝试更改 ChartJS 中上次单击的柱的不透明度，然后在下次单击另一个柱时将其"取消突出显示"。基本上是悬停的默认行为。请注意，这是一个堆叠的条形图，我希望整个条形列的不透明度发生变化，而不是每个单独的部分。

我已经能够将背景颜色(不确定如何更改不透明度(更改为单击时为黑色，但是单击下一项时它不会取消设置。因此，一旦单击所有内容，整个图表最终都会变黑。

这是我目前使用的点击代码：

var myChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
onClick: function(e){
myChart.update();
var element = this.getElementAtEvent(event)[0];
element.custom = element.custom || {};
element.custom.backgroundColor = '#000';
},
}
});

堆叠数据 ：

var data = {
"labels":["2011","2012","2013","2014","2015"],
"datasets":[
{
"label":"Total Fishermen",
"backgroundColor":"#518936",
"data":[991,1020,731,850,851]
},
{
"label":"Total Processing Employees",
"backgroundColor":"#82c6d4",
"data":[0,0,130,0,0]
},
{
"label":"Total Aquaculture Employees",
"backgroundColor":"#c0136b",
"data":[0,134,130,119,0]
}
]
};

任何帮助将不胜感激！

Answer 1

...但它不会在单击下一项时取消设置。

您可以使用active属性来获取活动组元素，并使用当前背景颜色添加 50% 的透明度：

this.active.forEach(function(ele, idx) {
ele.custom = ele.custom || {};
if (ele.custom.backgroundColor == undefined) {
var color = ele._model.backgroundColor.replace(')', ', 0.5)');
ele.custom.backgroundColor = color;
} else {
delete ele.custom.backgroundColor;
}
});

为了重置上次单击的元素，您可以在onClick处理程序中循环所有元素：

for(i=0; i<this.data.datasets.length; i++) {
this.getDatasetMeta(i).data.forEach(function(ele, idx) {
if (ele.custom != undefined)
delete ele.custom.backgroundColor;
});
}

Chart.pluginService.register({
afterInit: function (chart, options) {
chart.pluginInitialized = true;
},
afterDraw: function (chart, options) {
if (chart.pluginInitialized) {
var centerIndex = Math.floor(chart.data.labels.length/2);
for(var i=0; i<chart.data.datasets.length; i++) {
chart.getDatasetMeta(i).data.forEach(function(ele, idx) {
var opacity = ' 0.3)';
if (idx == centerIndex) {
opacity = ' 1)';
}
ele.custom = ele.custom || {};
if (ele.custom.backgroundColor == undefined) {
var rgb = ele._model.backgroundColor;
var match = null;
if (match = rgb.match(/^#([a-fA-F0-9]{6})$/i)) {
rgb = 'rgb(';
match = match[1];
for (var j = 0; j < 3; j++) {
rgb += parseInt(match.slice(j * 2, j * 2 + 2), 16) + ',';
}
rgb += opacity;
}
ele.custom.backgroundColor = rgb;
}
});
}
chart.pluginInitialized = false;
chart.update(true);
}
}
});
var ctx = document.getElementById('ctx').getContext('2d');
var data = {
"labels":["2011","2012","2013","2014","2015"],
"datasets":[
{
"label":"Total Fishermen",
"backgroundColor":"#518936",
"data":[991,1020,731,850,851]
},
{
"label":"Total Processing Employees",
"backgroundColor":"#82c6d4",
"data":[0,0,130,0,0]
},
{
"label":"Total Aquaculture Employees",
"backgroundColor":"#c0136b",
"data":[0,134,130,119,0]
}
]
};
var myChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
onClick: function (e) {
// remove old background opacity....
for(i=0; i<this.data.datasets.length; i++) {
this.getDatasetMeta(i).data.forEach(function(ele, idx) {
var rgx = /(rgba*(d{1,3}), *(d{1,3}), *(d{1,3}), *[0-9.]+())/;
ele._model.backgroundColor = ele._model.backgroundColor.replace(rgx, "$1, $2, $3$4");
if (ele.custom != undefined)
delete ele.custom.backgroundColor;
});
}
// set backgrounf opacity....
this.active.forEach(function(ele, idx) {
ele.custom = ele.custom || {};
if (ele.custom.backgroundColor == undefined) {
var color = ele._model.backgroundColor.replace(')', ', 0.5)');
ele.custom.backgroundColor = color;
} else {
delete ele.custom.backgroundColor;
}
});
myChart.update(true);
}
}
});

.graph {
height: 500px;
width: 500px;
text-align: center;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<div class="graph">
<canvas id="ctx"></canvas>
</div>