Chart.js 2.0のドーナツチャートのツールチップをカスタマイズする方法は？

Question

私はChart.js2のドーナツチャートを使っていくつかのデータを表示しようとしています。

私の現在のチャートは次のようになります。

：私の所望の出力をパーセントであり、このように見える別の属性を、示さなければならない

私はドキュメントを読んだことがありますが、これは非常に一般的でJavaScriptには新しかったので、これに対処できません。

最初のグラフのための私のコードは次のようである：http://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-configuration

を以下のコード例に示すように：

const renderCashCurrencyPie = (cashAnalysisBalances) => { 
    if (cashAnalysisBalances) { 
    const currenciesName = cashAnalysisBalances 
    .map(curName => curName.currency); 

    const availableCash = cashAnalysisBalances 
    .map(avCash => avCash.availableCash); 

    let currenciesCounter = 0; 
    for (let i = 0; i < currenciesName.length; i += 1) { 
     if (currenciesName[i] !== currenciesName[i + 1]) { 
     currenciesCounter += 1; 
     } 
    } 

    const currenciesData = { 
     labels: currenciesName, 
     datasets: [{ 
     data: availableCash, 
     backgroundColor: [ 
      '#129CFF', 
      '#0C6DB3', 
      '#FF6384', 
      '#00FFFF' 
     ], 
     hoverBackgroundColor: [ 
      '#FF6384', 
      '#36A2EB', 
      '#FFCE56', 
      '#00FFFF' 
     ] 
     }] 
    }; 

Answer 1

ここで説明したようにあなたは、チャートオプションツールチップ構成セクションを使用してツールチップをカスタマイズすることができます色、サイジング、スタイルなどを変更することができます。構成可能なオプションの完全なリストについては、上記のリンクされたドキュメントを参照してください。

ツールチップの表示にパーセンテージを追加する場合は、tooltip callbacksを使用できます。ドキュメントには、カスタマイズ可能なすべてのコールバックフィールドのリストがあります。

以下の例では、ラベル名を表示する「タイトル」、値を示す「ラベル」、および「afterLabel」にパーセントを追加しました。

var myChart = new Chart(ctx, { 
    type: 'doughnut', 
    data: data, 
    options: { 
    tooltips: { 
     callbacks: { 
     title: function(tooltipItem, data) { 
      return data['labels'][tooltipItem[0]['index']]; 
     }, 
     label: function(tooltipItem, data) { 
      return data['datasets'][0]['data'][tooltipItem['index']]; 
     }, 
     afterLabel: function(tooltipItem, data) { 
      var dataset = data['datasets'][0]; 
      var percent = Math.round((dataset['data'][tooltipItem['index']]/dataset["_meta"][0]['total']) * 100) 
      return '(' + percent + '%)'; 
     } 
     }, 
     backgroundColor: '#FFF', 
     titleFontSize: 16, 
     titleFontColor: '#0066ff', 
     bodyFontColor: '#000', 
     bodyFontSize: 14, 
     displayColors: false 
    } 
    } 
}); 

ワーキングJSFiddle：@Totザムの答えを1としてhttps://jsfiddle.net/m7s43hrs/

Answer 2

ますが、簡潔にするために、矢印の機能を使用して：

options: { 
    tooltips: { 
    callbacks: { 
     title: (items, data) => data.datasets[items[0].datasetIndex].data[items[0].index].myProperty1, 
     label: (item, data) => data.datasets[item.datasetIndex].data[item.index].myProperty2 
    } 
    } 
}