chart.jsでツールチップタイトルのデフォルトのコールバックを設定する方法

obourgain

私はChart.jsいくつかの棒グラフを描くために使用しています。すべてのチャートのツールチップのデフォルトコンテンツを変更したい。

ただし、次のコードは機能しません。

Chart.defaults.global.tooltips.callbacks.title = function(tooltipItems, data) {
  return "Overriden title"; // This code is not executed
};

new Chart($("#barchart"), {
  type: 'horizontalBar',
  data: {
    "labels": ["Label"],
    "datasets": [{
      "data": [42]
    }]
  },
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js"></script>

<canvas id="barchart" width="80" height="20"></canvas>

各Chartコンストラクターのオプションとしてコールバックを渡すことができることは知っていますが、グローバルオプションとして設定したいと思います。

ビッグレス

キーglobalを次のように置き換えますhorizontalBar

Chart.defaults.horizontalBar.tooltips.callbacks.title = function(tooltipItems, data) {
  return "Overriden title"; // This code is executed
};

new Chart($("#barchart"), {
  type: 'horizontalBar',
  data: {
    "labels": ["Label"],
    "datasets": [{
      "data": [42]
    }]
  },
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js"></script>

<canvas id="barchart" width="80" height="20"></canvas>

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

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

編集
0

コメントを追加

0

関連記事

分類Dev

チャートプロパティのイベントロードでchart.renderer.textを使用して、デフォルトのツールチップと同等のカスタムツールチップをマウスオーバーに配置する方法

分類Dev

Chart.js 2.0:ツールチップのタイトルを変更する方法

分類Dev

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

分類Dev

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

分類Dev

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

分類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

Python Altair Chart.save(file.html)によって生成されたAltairチャートのhtmlファイルにデフォルトのツールチップを表示するにはどうすればよいですか?

分類Dev

Chart.jsパイのツールチップがカットされる

分類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のマルチラベルツールチップ

分類Dev

[MIXED CHART.JS]各チャートのツールチップのラベルを操作するにはどうすればよいですか?

分類Dev

Chart.JS-ツールチップ-問題:3つのデータポイント、3つの個別のツールチップすべてが各データポイントに表示されます

分類Dev

chart.jsの凡例アイテムにツールチップを表示する方法

分類Dev

Chart.js 2.7.0グループ化された水平棒グラフ、グループ全体ではなく1つの棒のデータを表示するツールチップを取得するにはどうすればよいですか?

分類Dev

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

Related 関連記事

  1. 1

    チャートプロパティのイベントロードでchart.renderer.textを使用して、デフォルトのツールチップと同等のカスタムツールチップをマウスオーバーに配置する方法

  2. 2

    Chart.js 2.0:ツールチップのタイトルを変更する方法

  3. 3

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

  4. 4

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

  5. 5

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

  6. 6

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

  7. 7

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

  8. 8

    Chart.jsマルチバースタックチャートに複数のラベルを表示する方法

  9. 9

    ツールチップの正方形にカスタムカラーを設定するChart.js

  10. 10

    Chart.jsツールチップの背景色の設定

  11. 11

    混合チャートのChart.jsツールチップホバーのカスタマイズ

  12. 12

    ツールチップから特定のデータ値にアクセスする方法-Chart.js

  13. 13

    ウォーターフォールチャートを作成するためのchart.jsプラグイン

  14. 14

    Python Altair Chart.save(file.html)によって生成されたAltairチャートのhtmlファイルにデフォルトのツールチップを表示するにはどうすればよいですか?

  15. 15

    Chart.jsパイのツールチップがカットされる

  16. 16

    Chart.jsのタイトルカラーボックスを削除する方法

  17. 17

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

  18. 18

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

  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

    [MIXED CHART.JS]各チャートのツールチップのラベルを操作するにはどうすればよいですか?

  26. 26

    Chart.JS-ツールチップ-問題:3つのデータポイント、3つの個別のツールチップすべてが各データポイントに表示されます

  27. 27

    chart.jsの凡例アイテムにツールチップを表示する方法

  28. 28

    Chart.js 2.7.0グループ化された水平棒グラフ、グループ全体ではなく1つの棒のデータを表示するツールチップを取得するにはどうすればよいですか?

  29. 29

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

ホットタグ

アーカイブ