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

hjm

Chart.jsは初めてです。折れ線グラフを作成していますが、行き詰まっています。ツールチップに%を表示する必要がありますが、%を追加すると、期待どおりの結果が得られません。私は他の投稿に行きましたが、どの解決策も私を助けませんでした。

HTML:

 <canvas id="myChart2"></canvas>

JS:

  window.onload = function() {
          var ctx2 = document.getElementById('myChart2').getContext('2d');
          var data = [
          {date:'08-05-2017', run_rate: 50},
          {date:'08-06-2017', run_rate: 40},
          {date:'08-07-2017', run_rate: 30},
          {date:'08-08-2017', run_rate: 10},
          {date:'08-09-2017', run_rate: 6},
          {date:'08-10-2017', run_rate: 78},
          {date:'08-11-2017', run_rate: 32},
          {date:'08-12-2017', run_rate: 24}
        ];
          var dates = data.map(function(obj){
          return obj.date;
          });

          var count = data.map(function(obj){
          return obj.run_rate;
          });

          var myChart = new Chart(ctx2, {
          type: 'line',
          data: {
            labels: dates,
            datasets: [{
              label: '%',
              data: count,
              backgroundColor: "rgba(38, 82, 123, 0.5)"
            }]
          },
          options: {
              legend: {
                  display: false
              },
            maintainAspectRatio: false,
            responsive: true,
            tooltips: {titleFontSize:12, bodyFontSize:12},
            scales: {
              xAxes: [{
                display: true,
                gridLines: {
                  display: true
                },
                ticks: {
                 fontColor: '#000000'
               },
                scaleLabel: {
                  display: false,
                  labelString: 'Date',
                  fontColor: '#000000'
                }
              }],
              yAxes: [{
                display: true,
                gridLines: {
                  display: true
                },
                ticks: {
                 fontColor: '#000000',
                 callback: function(value){
                   return value + "%"
                 }
                },
                scaleLabel: {
                  display: false,
                  labelString: '',
                  fontColor: '#000000'
                }
              }]
            }
            //Scales Object Ends
          }
          //options object ends
        });
        //End of function
      }()

num %YAxesで作成したコールバック関数でわかるように、Y軸に数値を表示できますが、ツールチップを試してみると同じ結果にはなりません。num %ツールチップにも表示できるようにする必要があります。どんな知識でもありがたいです。ありがとう。

ɢʀᴜɴᴛ

ツールチップラベルのコールバック関数を使用%して、データ値とともに記号を表示できます。

tooltips: {
   callbacks: {
      label: function(t, d) {
         var xLabel = d.datasets[t.datasetIndex].label;
         var yLabel = t.yLabel;
         return xLabel + ': ' + yLabel + '%';
      }
   }
}

ᴡᴏʀᴋɪɴɢᴇxᴀᴍᴘʟᴇ

var ctx2 = document.getElementById('myChart2').getContext('2d');
var data = [{
   date: '08-05-2017',
   run_rate: 50
}, {
   date: '08-06-2017',
   run_rate: 40
}, {
   date: '08-07-2017',
   run_rate: 30
}, {
   date: '08-08-2017',
   run_rate: 10
}, {
   date: '08-09-2017',
   run_rate: 6
}, {
   date: '08-10-2017',
   run_rate: 78
}, {
   date: '08-11-2017',
   run_rate: 32
}, {
   date: '08-12-2017',
   run_rate: 24
}];
var dates = data.map(function(obj) {
   return obj.date;
});

var count = data.map(function(obj) {
   return obj.run_rate;
});

var myChart = new Chart(ctx2, {
   type: 'line',
   data: {
      labels: dates,
      datasets: [{
         label: 'Line',
         data: count,
         backgroundColor: "rgba(38, 82, 123, 0.5)"
      }]
   },
   options: {
      legend: {
         display: false
      },
      maintainAspectRatio: false,
      responsive: true,
      tooltips: {
         titleFontSize: 12,
         bodyFontSize: 12,
         callbacks: {
            label: function(t, d) {
               var xLabel = d.datasets[t.datasetIndex].label;
               var yLabel = t.yLabel;
               return xLabel + ': ' + yLabel + '%';
            }
         }
      },
      scales: {
         xAxes: [{
            display: true,
            gridLines: {
               display: true
            },
            ticks: {
               fontColor: '#000000'
            },
            scaleLabel: {
               display: false,
               labelString: 'Date',
               fontColor: '#000000'
            }
         }],
         yAxes: [{
            display: true,
            gridLines: {
               display: true
            },
            ticks: {
               fontColor: '#000000',
               callback: function(value) {
                  return value + "%"
               }
            },
            scaleLabel: {
               display: false,
               labelString: '',
               fontColor: '#000000'
            }
         }]
      }
      //Scales Object Ends
   }
   //options object ends
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="myChart2"></canvas>

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

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

編集
0

コメントを追加

0

関連記事

分類Dev

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

分類Dev

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

分類Dev

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

分類Dev

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

分類Dev

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

分類Dev

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

分類Dev

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

分類Dev

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

分類Dev

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

分類Dev

Chart.js v2 ドーナツ チャート ツールチップにすべての値を表示する

分類Dev

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

分類Dev

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

分類Dev

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

分類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 2.0 - ホバー時にツールチップに不完全なデータが表示される

分類Dev

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

分類Dev

Chart.jsのツールチップが表示されない

分類Dev

Chart.jsのツールチップが表示されない

分類Dev

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

分類Dev

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

分類Dev

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

分類Dev

Chart.jsの望ましくないツールチップが凡例に表示される

分類Dev

ツールチップが表示されると、上部のChart.JS値が消えます

Related 関連記事

  1. 1

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

  2. 2

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

  3. 3

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

  4. 4

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

  5. 5

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

  6. 6

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

  7. 7

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

  8. 8

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

  9. 9

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

  10. 10

    Chart.js v2 ドーナツ チャート ツールチップにすべての値を表示する

  11. 11

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

  12. 12

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

  13. 13

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

  14. 14

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

  15. 15

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

  16. 16

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

  17. 17

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

  18. 18

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

  19. 19

    Chart.js-ツールチップキャレットを非表示

  20. 20

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

  21. 21

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

  22. 22

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

  23. 23

    Chart.jsのツールチップが表示されない

  24. 24

    Chart.jsのツールチップが表示されない

  25. 25

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

  26. 26

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

  27. 27

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

  28. 28

    Chart.jsの望ましくないツールチップが凡例に表示される

  29. 29

    ツールチップが表示されると、上部のChart.JS値が消えます

ホットタグ

アーカイブ