点击使用ChartJS改变点的颜色
问题描述:
目前,我可以在单击它时改变单个点的颜色(在折线图上),但它会立即变回原来的颜色,我该如何防止这种情况发生?点击使用ChartJS改变点的颜色
这里是我的功能:
var options = {
onClick: function(e){
var element = this.getElementAtEvent(e);
if (element.length > 0) {
element[0]._view.backgroundColor = '#FFF';
this.update();
}
}
我发现这个同样的问题在这里https://github.com/chartjs/Chart.js/issues/2989,显然这家伙是能够管理它,但我认为,代码不再兼容。
我正在使用ChartJS v2.5.0。
答
以下方法利用的:
- 的
pointBackgroundColor
数据集属性,阵列这将保持点的当前颜色。单击一个点时,关联的数组值将更改为white
,并更新图表。 -
onClick
图表选项,“如果事件类型为'mouseup'或'click',则调用该函数。”它是“在图表的上下文中调用并通过事件和一系列活动元素。”
更多在docs。
说来话长代码:
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [72, 49, 43, 49, 35, 82],
pointBackgroundColor: ["red", "blue", "yellow", "green", "purple", "orange"]
}]
},
options: {
onClick: function(evt, activeElements) {
var elementIndex = activeElements[0]._index;
this.data.datasets[0].pointBackgroundColor[elementIndex] = 'white';
this.update();
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
太谢谢你了! – Ramon