web-dev-qa-db-ja.com

Chartjsツールチップの改行

Chartjsのツールチップで改行を取得することは可能ですか？

tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>"

「：」を新しい行に置き換えます。

&#013;、\u000D、\n、および<br />を試してみましたが、役に立ちませんでした。

更新：chart.js がバージョン2になったので、受け入れられた回答を変更しました。

javascriptchart.js
23
jcuenod

2.0.0-beta2を使用している場合、ツールチップコールバックを使用して、そこで文字列の配列を返すことができます。

tooltips: {
    mode: 'single',
    callbacks: {
        afterBody: function(data) {
            var multistringText = ['first string'];
            // do some stuff
            multistringText.Push('another string');

            return multistringText;
        }
    }
}
58
Alexey Pavlov

この時点では、ツールチップまたは軸ラベルに改行を追加することはできません。現在、開発者はディスカッションの実装オプションです。議論を見つけることができます 軸ラベルのラッピングを許可する（githubの問題） 。

6
Jarvl

実際、すべてのツールヒントコールバックは複数行のテキストをサポートしており、通常どおりlabelコールバックを使用できます。デフォルトでは、データラベルをツールチップテキストとしてレンダリングします。

ドキュメント から引用：

すべての関数は、文字列または文字列の配列を返す必要があります。文字列の配列は、複数行のテキストとして扱われます。

サンプルコード：

tooltips: {
    callbacks: {
      label: (tooltipItem, data) => {
        if (tooltipItem.index % 2)
          return ['Item 1', 'Item 2', 'Item 3'];
        else
          return 'Single line';
      }
    }
  }
4
Tien Do

ツールチップフッターコールバックを使用できます。また、各リストの色付きの四角形はレンダリングされません。

tooltips: {
  callbacks: {
    label: function(tooltipItem, data) {
      let label = data.datasets[tooltipItem.datasetIndex].label;
      let value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
      return label + ': ' + value;
    },
    footer: function(tooltipItems, data) {
      return ['new line', 'another line'];
    }
  }
}
4
ghanshyam shah