在图表问题的中心绘制饼图段的百分比

Question

我试图绘制当前在圆环中间盘旋的圆环段的百分比。

我正在使用chartjs 2，所以我正在研究插件。它说on the documentation，一个插件可以被称为“afterEvent” - “当一个事件发生在画布上（mousemove，click等），这需要options.events属性处理”。页面上的代码如下：

afterEvent: function(chartInstance, event) {} 

但是，我不知道如何使用afterEvent状态。我通过例子such as this以静态的方式绘制在甜甜圈的中间。但我希望能够在'afterEvent'而不是'beforeDraw'上运行此代码。是否有任何有关“事件”参数中的事件数据的文档？如果它是悬停事件，它是否会以'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为好。