Question

我想在甜甜圈图表中显示百分比值。为了我的功能正常工作，我需要访问回调内的图表实例。我不知道怎么做？

我使用 Chart.pluginService beforeDraw事件处理了它，但它无法正常工作。

有没有办法从工具提示回调中的beforeDraw事件中移动代码？

这是我的代码

tooltips: {
    callbacks: {
    label: function (tooltipItem, data) {

        var precentage = dataFromDoughnutChart;

        localStorage.setItem("per", precentage.toString());

        return precentage + "%";
    }
}
}

Chart.pluginService.register({

        beforeDraw: function (chart) {

            var value = "";
            var x = localStorage.getItem("per");

            if (x != null)
                value = x + "%";

            var width = chart.chart.width,
                height = chart.chart.height,
                ctx = chart.chart.ctx;

            ctx.restore();
            var fontSize = (height / 100).toFixed(2);
            ctx.font = fontSize + "em sans-serif";
            ctx.textBaseline = "middle";

            var text = value,
                textX = Math.round((width - ctx.measureText(text).width) / 2),
                textY = height / 2;

            ctx.fillText(text, textX, textY);
            ctx.save();
        },
        afterEvent: function (chart, event) {

            if (event.type == "mouseout") {

                localStorage.removeItem("per");
            }
        }
    });

Answer 1

我认为解决问题的最佳方法是实际使用custom tooltips而不是尝试插件。这是一个工作解决方案，我从其repo中的一个chart.js示例页面进行了修改。

首先在HTML中为自定义工具提示定义一个容器。

<div id="chartjs-tooltip"></div>

然后使用以下自定义工具提示功能。您可能需要根据需要调整centerX计算。此函数基本上计算当前活动切片的百分比值（通过将数据点除以数据点的总值），将其放在自定义工具提示div中，并将div定位在甜甜圈的中心。

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

以下是通过codepen的完整端到端工作示例：

Chart.js Doughnut Center Percentage

如何访问Chart.js中与当前工具提示回调相关的Chart实例

1 个答案: