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

ローラ・トーマス:

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

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

私の問題は、ツールチップにデータを別名のフォーマット済みデータとして表示する必要があることです。%付きの数値として。例として、データベースからの私のデータの1つは-0.17222です。テーブルに表示するパーセンテージとしてフォーマットしましたが、すべて順調です。ただし、chart.js棒グラフのデータを設定すると、データには明らかにこの書式設定が欠落し、-0.17222として表示されます。

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

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

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

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

data: kpiRex.getDataAtRow(3)

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

rtome:

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

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

これにより、必要な場合は値の後に「%」記号を追加できます。

ここだjsfiddleこれを説明するには

注意tooltipTemplateが一つだけのデータセットを持っている場合、適用されるmultiTooltipTemplateはあなたがいくつかのデータセットを持っている場合に適用されます。

このオプションは、ドキュメントのグローバルチャート構成セクションで説明されています見てください、そこでカスタマイズできる他のすべてのオプションをチェックする価値があります。

データセットには数値のみを含める必要があることに注意してください。(%記号やその他のものはありません)。

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

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

編集
0

コメントを追加

0

関連記事

分類Dev

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

JavaScript-Chart.jsツールチップに間違ったx軸値が表示される

分類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軸にカンマを追加する

分類Dev

Chart.jsデカルト軸-データが対応するy軸に基づいてツールチップを変更する

分類Dev

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

分類Dev

カーソルが間違った位置にあると、Chart.jsのマウスオーバーツールチップが表示されます

分類Dev

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

分類Dev

Chart.JS:ドーナツグラフにカスタムラベルを永続的に表示する

分類Dev

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

分類Dev

ツールチップを非表示/無効にするchart.js

分類Dev

ツールチップを非表示/無効にするchart.js

分類Dev

ツールチップを非表示/無効にするchart.js

分類Dev

Chart.jsにカスタムデータスケールを追加する

分類Dev

Chart jsのツールチップは、対応するデータセットの色ではなく、常に黒です。

Related 関連記事

  1. 1

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

  2. 2

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

  3. 3

    Chart.jsとカスタムスクリプトを使用して、デフォルトでデータセットを非表示にします

  4. 4

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

  5. 5

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

  6. 6

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

  7. 7

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

  8. 8

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

  9. 9

    JavaScript-Chart.jsツールチップに間違ったx軸値が表示される

  10. 10

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

  11. 11

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

  12. 12

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

  13. 13

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

  14. 14

    Chart.js 2.0 - ホバー時にツールチップに不完全なデータが表示される

  15. 15

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

  16. 16

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

  17. 17

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

  18. 18

    Chart.jsツールチップとY軸にカンマを追加する

  19. 19

    Chart.jsデカルト軸-データが対応するy軸に基づいてツールチップを変更する

  20. 20

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

  21. 21

    カーソルが間違った位置にあると、Chart.jsのマウスオーバーツールチップが表示されます

  22. 22

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

  23. 23

    Chart.JS:ドーナツグラフにカスタムラベルを永続的に表示する

  24. 24

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

  25. 25

    ツールチップを非表示/無効にするchart.js

  26. 26

    ツールチップを非表示/無効にするchart.js

  27. 27

    ツールチップを非表示/無効にするchart.js

  28. 28

    Chart.jsにカスタムデータスケールを追加する

  29. 29

    Chart jsのツールチップは、対応するデータセットの色ではなく、常に黒です。

ホットタグ

アーカイブ