Question

我是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
      }()

我可以在Y轴上显示一个数字num %，正如我在YAxes上所做的回调函数中所看到的那样，但是当我尝试使用工具提示时，结果并不相同。我还需要能够在工具提示中显示num %。任何知识将不胜感激。感谢。

Answer 1

您可以使用工具提示标签callback功能显示 % 符号以及数据值，如下所示：

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>

Chart.js如何在工具提示上显示％

1 个答案: