Chart.jsの現在のツールチップコールバックに関連するChartインスタンスへのアクセス方法

Question

ドーナツチャートにパーセント値を表示しようとしています。私の機能が正しく動作するためには、コールバック内のチャートインスタンスにアクセスする必要があります。私はそれをする方法を知らない？

Chart.pluginService beforeDrawイベントを使用して処理しましたが、期待通りに機能しません。

ツールチップコールバック内でbeforeDrawイベントからコードを移動する方法はありますか？

これは、私はあなたの問題を解決するための最善のアプローチは、実際にプラグインをしようとするのではなく、custom tooltipsを使用することだと思います私のコード

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

です。ここでは、自分のレポのchart.jsサンプルページの1つから修正した実用的なソリューションを紹介します。

まず、yout 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