Javascript Chart.js如何在工具提示中显示%

我是Chart.js的新手。我正在做一张折线图，但我被卡住了。我需要在工具提示中显示%，但添加%时，结果与预期不符。我曾到过其他岗位，但没有一个解决方案能帮到我

HTML:

我可以将Y轴上的数字显示为

num%

，正如我在Yax上创建的回调函数所示，但是当我尝试使用工具提示时，结果不一样。我还需要能够在工具提示中显示

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'）；
风险值数据=[{
日期：2017年5月8日，
运行率：50
}, {
日期：2017年6月8日，
运行率：40
}, {
日期：2017年7月8日，
运行率：30
}, {
日期：2017年8月8日，
运行率：10
}, {
日期：2017年9月8日，
运行率：6
}, {
日期：2017年10月8日，
运行率：78
}, {
日期：2017年11月8日，
运行率：32
}, {
日期：2017年12月8日，
运行率：24
}];
变量日期=data.map（函数（obj）{
返回对象日期；
});
var count=data.map（函数（obj）{
返回目标运行率；
});
var myChart=新图表（ctx2{
键入：“行”，
数据：{
标签：日期，
数据集：[{
标签：“行”，
数据：计数，
背景色：“rgba（38,82,123,0.5）”
}]
},
选项：{
图例：{
显示：假
},
MaintaintAspectRatio:false，
回答：是的，
工具提示：{
标题字体：12，
车身尺寸：12，
回调：{
标签：功能（t，d）{
var xLabel=d.datasets[t.datasetIndex].label；
var yLabel=t.yLabel；
返回xLabel+'：'+yLabel+'%'；
}
}
},
比例：{
xAxes：[{
显示：对，
网格线：{
显示：真
},
滴答声：{
fontColor:“#000000”
},
scaleLabel：{
显示：假，
标签字符串：“日期”，
fontColor:“#000000”
}
}],
雅克斯：[{
显示：对，
网格线：{
显示：真
},
滴答声：{
fontColor:“#000000”，
回调：函数（值）{
返回值+“%”
}
},
scaleLabel：{
显示：假，
标签字符串：“”，
fontColor:“#000000”
}
}]
}
//缩放对象端点
}
//选项对象结束
});


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

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