Chart.js V2:ツールチップラベルにプレフィックスまたはサフィックスを追加します

Algorithm_NL

Chart.js V1.0ではtooltipTemplate: "<%if (label){%><%=label %>: <%}%><%= '€' + value %>"、ツールチップラベルの接頭辞としてユーロ記号を追加するために追加します。ただし、これはV2では機能しなくなりました。誰かがこれを達成するための新しい方法を知っていますか?見つからないようです。

どうもありがとう!

わがまま

V2.0では、tooltipTemplateオプションは非推奨になりました。代わりに、コールバックを使用して、表示されているツールチップを変更できます。ここにコールバックの使用法のサンプルがあり、Chart.defaults.global.tooltipsのドキュメント可能なコールバックを見つけることができます。

あなたの場合、私は次のことをします:

window.myLine = new Chart(chart, {
    type: 'line',
    data: lineChartData,
    options: {
            tooltips: {
                enabled: true,
                mode: 'single',
                callbacks: {
                    label: function(tooltipItems, data) { 
                        return tooltipItems.yLabel + ' €';
                    }
                }
            },
     }       
  });

HTMLメタタグを設定することを忘れないでください:

<meta charset="UTF-8">

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

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

編集
0

コメントを追加

0

関連記事

分類Dev

Chart.js v2:ツールチップを常に円グラフに表示する方法

分類Dev

Chart.jsデータセットにサフィックスを追加しますか?

分類Dev

Chart.js-ツールチップを使用せずにバブルチャート要素にテキスト/ラベルを追加しますか?

分類Dev

Chart.js v2キャンバスの外にあるカスタムボタンをクリックしてツールチップポップアップをナビゲートする方法は?

分類Dev

Chart.jsはカスタムタイトル、サブタイトル、グラフィックを追加します

分類Dev

Chart.js:積み上げ棒グラフに常に表示されるカスタムツールチップを表示します

分類Dev

ツールチップコールバックを使用したラベルのchart.jsブレークライン

分類Dev

Chart.jsのすべてのラベルとツールチップを非表示にして、サイズを非常に小さくします

分類Dev

chart.js のグラフのツールチップにデータを追加する方法

分類Dev

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

分類Dev

chart.jsでプロットまたはラベルクリックイベントを登録する方法

分類Dev

Chart.jsティックラベルの位置を変更します

分類Dev

Chart.jsのマルチラベルツールチップ

分類Dev

Chart.js Y軸ラベル、ツールチップの順序を逆にし、X軸ラベルを短くします

分類Dev

chart.js棒グラフのツールチップをカスタマイズする

分類Dev

Chart.jsのツールチップ値は2行で表示されます

分類Dev

ツールチップがChart.jsの棒グラフを台無しにする

分類Dev

JavaScript Chart.js-ツールチップに表示するカスタムデータフォーマット

分類Dev

Chart.js:ツールチップラベルの色付け

分類Dev

特定のデータラベルのchart.jsでツールチップを非表示にする方法は?

分類Dev

Chart.js-ツールチップで任意の点を描画します

分類Dev

Chart.JSで単一のツールチップを表示しますか?

分類Dev

Chart.jsは、ページの読み込み時にツールチップを表示します

分類Dev

Chart.js折れ線グラフのツールチップをカスタマイズするにはどうすればよいですか?

分類Dev

chart.jsのツールチップにカスタムタイトルを追加する

分類Dev

Chart.js-ドーナツはアクティブなセグメントのツールチップを表示します(外部ボタンをクリックすると)

分類Dev

Chart.jsツールチップのキャレット位置を変更します

分類Dev

Chart.jsツールチップに%を表示する方法

分類Dev

Chart.jsツールチップに%を表示する方法

Related 関連記事

  1. 1

    Chart.js v2:ツールチップを常に円グラフに表示する方法

  2. 2

    Chart.jsデータセットにサフィックスを追加しますか?

  3. 3

    Chart.js-ツールチップを使用せずにバブルチャート要素にテキスト/ラベルを追加しますか?

  4. 4

    Chart.js v2キャンバスの外にあるカスタムボタンをクリックしてツールチップポップアップをナビゲートする方法は?

  5. 5

    Chart.jsはカスタムタイトル、サブタイトル、グラフィックを追加します

  6. 6

    Chart.js:積み上げ棒グラフに常に表示されるカスタムツールチップを表示します

  7. 7

    ツールチップコールバックを使用したラベルのchart.jsブレークライン

  8. 8

    Chart.jsのすべてのラベルとツールチップを非表示にして、サイズを非常に小さくします

  9. 9

    chart.js のグラフのツールチップにデータを追加する方法

  10. 10

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

  11. 11

    chart.jsでプロットまたはラベルクリックイベントを登録する方法

  12. 12

    Chart.jsティックラベルの位置を変更します

  13. 13

    Chart.jsのマルチラベルツールチップ

  14. 14

    Chart.js Y軸ラベル、ツールチップの順序を逆にし、X軸ラベルを短くします

  15. 15

    chart.js棒グラフのツールチップをカスタマイズする

  16. 16

    Chart.jsのツールチップ値は2行で表示されます

  17. 17

    ツールチップがChart.jsの棒グラフを台無しにする

  18. 18

    JavaScript Chart.js-ツールチップに表示するカスタムデータフォーマット

  19. 19

    Chart.js:ツールチップラベルの色付け

  20. 20

    特定のデータラベルのchart.jsでツールチップを非表示にする方法は?

  21. 21

    Chart.js-ツールチップで任意の点を描画します

  22. 22

    Chart.JSで単一のツールチップを表示しますか?

  23. 23

    Chart.jsは、ページの読み込み時にツールチップを表示します

  24. 24

    Chart.js折れ線グラフのツールチップをカスタマイズするにはどうすればよいですか?

  25. 25

    chart.jsのツールチップにカスタムタイトルを追加する

  26. 26

    Chart.js-ドーナツはアクティブなセグメントのツールチップを表示します(外部ボタンをクリックすると)

  27. 27

    Chart.jsツールチップのキャレット位置を変更します

  28. 28

    Chart.jsツールチップに%を表示する方法

  29. 29

    Chart.jsツールチップに%を表示する方法

ホットタグ

アーカイブ