Chart.js在初始化时设置活动段

Question

我正在使用chart.js v2，我试图在图表加载时模拟环形图上段的悬停状态，以便突出显示某个部分。

我一直在寻找和梳理一天的代码，并找不到一个好的方法来做到这一点。

在此先感谢！

Answer 1

设置段的悬停样式有点令人困惑，因为它没有真正记录在任何地方。不过，当我想在传奇标签悬停的时候突出显示一个细分市场的时候，我能够找出它。

要做到这一点，您需要使用饼图.updateHoverStyle()原型方法并传入您想要突出显示的段。图表段存储在数组中的_meta对象中，其中每个段索引与图表数据数组中的每个值的位置相匹配。

下面是一个例子（假设您的图表实例存储在一个变种称为myPie。

// get the segment we want to highlight 
var activeSegment = myPie.data.datasets[0]._meta[0].data[segmentIndexToHihlight]; 

// update the hover style 
myPie.updateHoverStyle([activeSegment], null, true); 

// render so we can see it 
myPie.render(); 

你只需要定义要突出显示并存储在一个VAR什么段称为segmentIndexToHihlight，它应该工作。

这里是一个codepen example展示这一点。请注意，我故意没有突出的负载段（我等待3秒），这样就可以看到变化的发生。