图表.js初始化时设置活动段

Question

我正在使用图表.js v2，我正在尝试在图表加载时模拟甜甜圈图上段的悬停状态，因此它看起来有一个部分突出显示。

我已经搜索和梳理代码一天了，但找不到做到这一点的好方法。

提前感谢！

Answer 1

设置区段的悬停样式有点令人困惑，因为它并没有真正记录在任何地方。 尽管如此，当我想在图例标签悬停时突出显示一个片段时，我还是能够弄清楚的。

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

下面是一个示例(假设您的图表实例存储在名为 myPie 的 var 中。

// 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(); 

您只需要定义要突出显示的段并将其存储在名为 segmentIndexToHihlight 的 var 中，它应该可以工作。

下面是一个演示这一点的代码笔示例。 请注意，我故意没有在加载时突出显示段(我等待 3 秒(，以便您可以看到更改发生。

Answer 2

我找到了另一种预选区段的方法，基本上你可以在点上模拟点击事件。您可以在数据集模型中找到位置 x 和 y。在这里你可以找到我的解决方案：

function simulateClick(x, y) {
  const clickEvent = document.createEvent('MouseEvents');
  clickEvent.initMouseEvent('click', true, true, window, 0, 0, 0, x, y, 
  false, false, false, false, 0, null);
  document.elementFromPoint(x, y).dispatchEvent(clickEvent);
}
function initActivePoint(index) {
  const activePoint = myChart.data.datasets[0]._meta[0].data[index];
  simulateClick(activePoint._model.x, activePoint._model.y);
}
initActivePoint(0);