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 示例。请注意，我故意没有突出显示加载段（我等待 3 秒），以便您可以看到发生的变化。