点击使用ChartJS改变点的颜色

Question

目前，我可以在单击它时改变单个点的颜色（在折线图上），但它会立即变回原来的颜色，我该如何防止这种情况发生？

这里是我的功能：

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。

Answer 1

以下方法利用的：

• 的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>

And a fiddle to play with.