Question

我正试图绘制甜甜圈中间正在徘徊的甜甜圈片段的百分比。

我正在使用chartjs 2，因此我正在研究插件。它说on the documentation有一次插件可以在“afterEvent”上调用 - “当一个事件发生在画布上时（鼠标移动，点击等）。这需要处理options.events属性”。页面上的代码如下：

afterEvent: function(chartInstance, event) {}

但是，我不确定如何使用afterEvent状态。我已经通过以下示例such as this以静态方式画在甜甜圈中间。但我希望能够在'afterEvent'而不是'beforeDraw'上运行此代码。是否有关于'event'参数中哪些事件数据的文档？如果它是一个悬停事件，它会以“onHover”的方式向我提供正在悬停的片段的价值吗？

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

感谢您的时间。

Answer 1

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

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

以下是相关代码

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';
};

还有一个working example。

用chartjs问题绘制甜甜圈中间的饼图段百分比

1 个答案: