Question

我正在尝试通过外部“鼠标悬停”事件来更改折线图中特定元素的点样式。此事件检索折线图中要更改其样式的元素的索引号。现在，我的代码更改了整个图形中的点样式，而不仅仅是1个元素，如下所示：

function highlightGraph(linkid) {
            var chartIndexArray = chart.data

            // Retrieve the corrosponding index of the value in the chart
            var chartIndex = chartIndexArray.labels.indexOf(linkid)

            // Changes every point element -- Not what I want
            chart.data.datasets[0].pointBackgroundColor = 'rgba(255,255,255)';

            // Changes only the retrieved index point -- Does nothing
            chart.data.datasets[0].data[chartIndex].pointBackgroundColor = 'rgba(0,0,0';

            chart.update();
}

我的问题非常类似：Change point color on click using ChartJS，但是我没有更改图表中onHover的样式，而是更改了页面上另一个元素（d3.Select）的onHover。结果，我无法使用getElementAtEvent访问图表元素。

谢谢您的时间。

编辑：请参见以下小提琴：https://jsfiddle.net/rm6abn2t/194/，其中我试图通过函数将仅蓝点更改为白点。

Answer 1

如this jsfiddle

所示

不是这样的：

myChart.data.datasets[0].data[chartIndex].pointBackgroundColor = 'white';

但这是

myChart.data.datasets[0].pointBackgroundColor[chartIndex] = 'white';

通过外部事件更改Chartjs中的点样式

1 个答案: