Javascript 使用chartjs问题在甜甜圈中间绘制饼图段百分比 我试图炸圈饼的炸圈饼的百分比。

我正在使用ChartJS2，因此我正在研究插件。它说，当画布上发生事件（mousemove、click等）时，可以在“afterEvent”上调用插件，这需要options.events属性handled。页面上的代码如下所示：

afterEvent: function(chartInstance, event) {}

但是，我不确定如何使用afterEvent状态。我已经通过以下例子以一种静态的方式画炸圈饼的中间部分。但我希望能够在“afterEvent”而不是“beforeDraw”上运行此代码。是否有关于“事件”参数中包含哪些事件数据的文档？如果是悬停事件，它是否会以与“onHover”相同的方式给我悬停的段的值

我只是在任何地方都找不到任何进一步的文档。如果有人能给我指出正确的方向那就太好了

---

谢谢您的时间。

很有可能通过插件实现这一点，但这里有一种替代方法，可以为您提供完全相同的行为

基本上，您使用一个位于图表中间的外部自定义工具提示，该工具在图表段悬停时触发。

这是相关代码

Chart.defaults.global.tooltips.custom = function(tooltip) {
  // Tooltip Element
  var tooltipEl = document.getElementById('chartjs-tooltip');

  // Hide if no tooltip
  if (tooltip.opacity === 0) {
    tooltipEl.style.opacity = 0;
    return;
  }

  // Set Text
  if (tooltip.body) {
    var total = 0;

    // get the value of the datapoint
    var value = this._data.datasets[tooltip.dataPoints[0].datasetIndex].data[tooltip.dataPoints[0].index].toLocaleString();

    // calculate value of all datapoints
  this._data.datasets[tooltip.dataPoints[0].datasetIndex].data.forEach(function(e) {
      total += e;
    });

    // calculate percentage and set tooltip value
    tooltipEl.innerHTML = '<h1>' + (value / total * 100) + '%</h1>';
  }

  // calculate position of tooltip
  var centerX = (this._chartInstance.chartArea.left + this._chartInstance.chartArea.right) / 2;
  var centerY = ((this._chartInstance.chartArea.top + this._chartInstance.chartArea.bottom) / 2);

  // Display, position, and set styles for font
  tooltipEl.style.opacity = 1;
  tooltipEl.style.left = centerX + 'px';
  tooltipEl.style.top = centerY + 'px';
  tooltipEl.style.fontFamily = tooltip._fontFamily;
  tooltipEl.style.fontSize = tooltip.fontSize;
  tooltipEl.style.fontStyle = tooltip._fontStyle;
  tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
};

Chart.defaults.global.tooltips.custom=函数（工具提示）{
//工具提示元素
var tooltipEl=document.getElementById（'chartjs-tooltip'）；
//如果没有工具提示，则隐藏
如果（tooltip.opacity==0）{
tooltipEl.style.opacity=0；
回来
}
//设置文本
if（tooltip.body）{
var合计=0；
//获取数据点的值
var value=this.\u data.datasets[tooltip.dataPoints[0].datasetIndex].data[tooltip.dataPoints[0].index].toLocaleString（）；
//计算所有数据点的值
此.u data.datasets[tooltip.dataPoints[0].datasetIndex].data.forEach（函数（e）{
总数+=e；
});
//计算百分比并设置工具提示值
tooltipEl.innerHTML=''+（值/总数*100）+'%；
}
//计算工具提示的位置
var centerX=（this.\u chartInstance.chartArea.left+this.\u chartInstance.chartArea.right）/2；
var centerY=（（this.\u chartInstance.chartArea.top+this.\u chartInstance.chartArea.bottom）/2）；
//显示、定位和设置字体样式
tooltipEl.style.opacity=1；
tooltipEl.style.left=centerX+'px'；
tooltipEl.style.top=centerY+'px'；
ToolTipe.style.fontFamily=工具提示。\u fontFamily；
tooltipEl.style.fontSize=tooltip.fontSize；
tooltipEl.style.fontStyle=工具提示。\u fontStyle；
tooltipEl.style.padding=tooltip.yPadding+'px'+tooltip.xPadding+'px'；
};

---

a也是。

啊，太好了，我没想到要使用自定义工具提示方法。这正是我所要寻找的，而且它的好处是使用CSS而不是在画布上设置样式。再次感谢！嗨，我遇到了一个问题，因为我已经尝试用我自己的图表来实现它。由于某些原因，tooltip.dataPoints不存在。我已经检查了元素并在该行上放置了一个断点，当我查看tooltip对象包含的内容时，数据点不在那里。是否有我无法打开的设置或类似的设置？我的代码和你的代码看起来是一样的——除了我的图表数据在使用过程中得到更新（就像我在一个新的数据点数组中输入“数据”后进行更新（）一样），这可能是问题所在吗？忽略最后一条注释，原来我使用的是chartjs 2.1，它在工具提示中没有datapoints属性。在我改为2.5后，现在它工作得很好，再次感谢！