Question

我正在使用chart.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中，它应该可以正常工作。

这是一个codepen example来证明这一点。注意，我故意没有在加载时突出显示段（我等待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);

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

2 个答案: