Chart.js 2.0ドーナツグラフのツールチップをカスタマイズする方法

debugcn 投稿 Dev

user7334203：

Chart.js2のドーナツグラフを使用していくつかのデータを表示しようとしています。

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

私の望ましい出力は、パーセンテージである別の属性を示す必要があり、次のようになります。

私はドキュメントを読みましたが、非常に一般的であり、JavaScriptを初めて使用するため、これに対応できません。

最初のチャートの私のコードは次のとおりです：

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

トットザム：

ここで説明するように、チャートオプションのツールチップ構成セクションを使用してツールチップをカスタマイズできます。http：//www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-configuration

以下のサンプルコードに示すように、色、サイズ、スタイルなどを変更できます。構成可能なオプションの完全なリストについては、上記にリンクされているドキュメントを確認してください。

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

以下の例では、「タイトル」を設定してラベル名を表示し、「ラベル」を値を表示して、パーセンテージを「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：https ://jsfiddle.net/m7s43hrs/

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]