通过单击更改单个点的颜色 - Chart.JS

Question

我正在使用 Chart.JS（最新版本）构建散点图，我尝试实现的行为之一是单击单个点并通过更改所选点的背景颜色来突出显示它点.

我使用了 Chart.JS API 中的 getElementsAtEvent 方法来获取活动元素并更改其背景。有那么一小会儿，我可以看到它改变了颜色，但它 returns 变成了原来的颜色，所有其他点现在都有我想应用于所选点的颜色……我尝试了各种方法，使用updated 和 render 方法但没有预期的结果...

这是函数中的代码，它将运行 onClick

function (evt, activeElements, chart) {
  const selectedPoint = chart.getElementsAtEventForMode(evt, 'nearest', { intersect: true }, true);

  selectedPoint[0].element.options.backgroundColor = '#fa6400';

  chart.update();
}

这是一个 fiddle https://jsfiddle.net/dc3x70yg/1/

提前致谢

Answer 1

您可以在 dataset 上定义选项 pointBackgroundColor。当用户点击一个点时，您重新创建 pointBackgroundColor，但现在使用包含每个点所需颜色的 array。

请查看下面您修改后的代码，看看它是如何工作的。

new Chart('myChart', {
  type: 'scatter',
  data: {
    datasets: [{
      label: '# of Votes',
      data: [{ x: -10, y: 0 }, { x: 0, y: 10 }, { x: 10, y: 5 }, { x: 0.5, y: 5.5 }],
      pointBackgroundColor: '#ddd',
      pointRadius: 5,
    }]
  },
  options: {
    onClick: (event, elements, chart) => {
      const dataset = chart.data.datasets[0];     
      dataset.pointBackgroundColor = dataset.data.map((v, i) => i == elements[0]?.index ? '#fa6400': '#ddd');
      chart.update();
    },
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<canvas id="myChart" width="400" height="200"></canvas>

通过单击更改单个点的颜色 - Chart.JS

Change color of a single point by clicking on it - Chart.JS

chart.js