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.

使用ChartJS单击更改点颜色

1 个答案: