web-dev-qa-db-ja.com

JavaScript Chart.js-ツールチップに表示するカスタムデータ形式

ここでさまざまなドキュメントと同様の質問を見てきましたが、特定の解決策を見つけることができないようです。明らかな何かを見逃したか、この質問を繰り返した場合、おApびします！

背景情報として、Chart.jsプラグインを使用して4つのグラフを実装し、データベースのPHPを使用して必要なデータを渡しました。これはすべて正常に機能しており、問題ありません。

私の問題は、ツールチップにデータをフォーマットされたデータとして別名で表示する必要があることです。 ％の数値として。例として、データベースからのデータの1つは-0.17222です。テーブルに表示する割合としてフォーマットしましたが、すべて順調です。ただし、chart.js棒グラフのデータを設定する場合、データには明らかにこの書式設定が欠落しており、-0.17222として表示されますが、これは望ましくありません。

申し訳ありませんが、私は写真を投稿したかったのですが、私の評判はあまりにもゴミです！

データベースからデータを取得し、テーブルに設定します。

var kpiRex = new Handsontable(example1, {
    data: getRexData(),

次に、チャートセクションでこのようにこのデータをフィードします。

data: kpiRex.getDataAtRow(3)

どんな助けも素晴らしいでしょう！私は何時間もこれにこだわっており、おそらく私が見落としている本当に簡単なものです。

javascriptstring-formattingnumber-formattingcode-formattingchart.js
45
Laura Thomas

次のように、チャートオプションでカスタムツールチップテンプレートを指定します。

 // String - Template string for single tooltips
 tooltipTemplate: "<%if (label){%><%=label %>: <%}%><%= value + ' %' %>",
 // String - Template string for multiple tooltips
 multiTooltipTemplate: "<%= value + ' %' %>",

これにより、必要に応じて値の後に「％」記号を追加できます。

ajsfiddleこれを説明するために です。

tooltipTemplateはデータセットが1つしかない場合に適用され、multiTooltipTemplateは複数のデータセットがあります。

このオプションは ドキュメントのグローバルチャート設定セクション に記載されています。見てください、そこでカスタマイズできる他のすべてのオプションを確認する価値があります。

データセットには数値のみを含める必要があることに注意してください。 （％記号などはありません）。

34
rtome

Chart.js 2.0以降では、これが変更されました（tooltipTemplate/multiTooltipTemplateはもうありません）。現在のフォーマットされていない値にアクセスして微調整を開始するだけの場合、デフォルトのツールチップは次と同じです。

options: {
    tooltips: {
        callbacks: {
            label: function(tooltipItem, data) {
                return tooltipItem.yLabel;
            }
        }
    }
}

つまり、y軸の値を保持するtooltipItem.yLabelに変更を返すことができます。私の場合、財務チャートにドル記号、四捨五入、および数千個のコンマを追加したいので、次を使用しました。

options: {
    tooltips: {
        callbacks: {
            label: function(tooltipItem, data) {
                return "$" + Number(tooltipItem.yLabel).toFixed(0).replace(/./g, function(c, i, a) {
                    return i > 0 && c !== "." && (a.length - i) % 3 === 0 ? "," + c : c;
                });
            }
        }
    }
}
96
Kyrth

Chart.js 2.1.6では、（TypeScriptで）次のようなことをしました：

  let that = this;
  options = {
    legend: {
      display: false,
      responsive: false
    },
    tooltips: {
      callbacks: {
        label: function(tooltipItem, data) {
          let account: Account = that.accounts[tooltipItem.index];
          return account.accountNumber+":"+account.balance+"€";
        }
      }
    }
  }
34
Patrice

TooltipTemplateに関数を指定し、必要に応じてツールチップをフォーマットできます。

tooltipTemplate: function(v) {return someFunction(v.value);}
multiTooltipTemplate: function(v) {return someOtherFunction(v.value);}

'v'引数が指定されたものには、 'value'プロパティ以外にも多くの情報が含まれています。その関数内に「デバッガ」を配置し、それらを自分で検査できます。

11
Ariel Cabib
tooltips: {
          callbacks: {
            label: (tooltipItem, data) => {
              // data for manipulation
              return data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
            },
          },
        },
5
Admir

Chart.Js 2.8.0では、カスタムツールチップの設定は次の場所にあります。 https://www.chartjs.org/docs/latest/configuration/tooltip.html#label-callback （Thanksに @ prokaktus ）

あなたがしたい場合プレフィックスまたはポストフィックス付きの値を表示します（この例では、スクリプトはkWhの単位をチャートの値に追加します）、次のようにできます：

options: {
  rotation: 1 * Math.PI,
  circumference: 1 * Math.PI,
  tooltips: {
    callbacks: {
      label: function(tooltipItem, data) {
        console.log(data);
        console.log(tooltipItem);

        var label = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] || '';

        if (label) {
          label += ' kWh';
        }

        return label;
      }
    }
  }
}

フィドルの例もここにあります： https://jsfiddle.net/y3petw58/1/

1
FranzHuber23
tooltips: {
            enabled: true,
                  mode: 'single',
                  callbacks: {
                    label: function(tooltipItems, data) { 
                      return data.datasets[tooltipItems.datasetIndex].label+": "+tooltipItems.yLabel;
                    }
                  }
                }
0
Nhan Nguyen Truong

Label Callbackを使用する必要があります。データ値を丸める一般的な例として、次の例ではデータを小数点以下2桁に丸めています。

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        tooltips: {
            callbacks: {
                label: function(tooltipItem, data) {
                    var label = data.datasets[tooltipItem.datasetIndex].label || '';

                    if (label) {
                        label += ': ';
                    }
                    label += Math.round(tooltipItem.yLabel * 100) / 100;
                    return label;
                }
            }
        }
    }
});

次に、ラベルコールバック機能を使用したシナリオを作成します。

ラベルコールバック関数の引数のログから始めましょう。このデータセットに似た構造が表示されます。配列は、チャートにプロットするさまざまな行で構成されます。私の場合は4であるため、データセット配列の長さは4です。

enter image description here

私の場合、各データセットでいくつかの計算を実行する必要があり、グラフの線にカーソルを合わせるたびに正しい線を特定する必要がありました。

異なる行を区別し、他の行のデータに基づいてホバーされたツールチップのデータを操作するには、このロジックを作成する必要がありました。

  callbacks: {
    label: function (tooltipItem, data) {
      console.log('data', data);
      console.log('tooltipItem', tooltipItem);
      let updatedToolTip: number;
      if (tooltipItem.datasetIndex == 0) {
        updatedToolTip = tooltipItem.yLabel;
      }
      if (tooltipItem.datasetIndex == 1) {
        updatedToolTip = tooltipItem.yLabel - data.datasets[0].data[tooltipItem.index];
      }
      if (tooltipItem.datasetIndex == 2) {
        updatedToolTip = tooltipItem.yLabel - data.datasets[1].data[tooltipItem.index];
      }
      if (tooltipItem.datasetIndex == 3) {
        updatedToolTip = tooltipItem.yLabel - data.datasets[2].data[tooltipItem.index]
      }
      return updatedToolTip;
    }
  }

上記のシナリオは、同じインデックスのチャート内の異なるラインに属する他のポイントのデータに基づいて、ラインチャートに異なるラインをプロットし、ラインのホバーポイントのツールチップを操作する必要がある場合に便利です。

0
Divyanshu Rawat