在悬停弹出窗口中显示 y 轴数据值后的字符 Chart.js

Question

我是 Chart.js 的新手，在自定义 onHover() 弹出窗口时遇到了一些问题。我想在弹出窗口的 y 轴数据值后添加一个百分号，这样显示的内容将如下所示，标签：值%。我已经尝试使用 scaleLabel 和 ticks，现在运气不错。

现在是这样的：

这是我的代码：

let chart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: dates, 
      datasets: [
        {
            label: 'Casos confirmados',
            backgroundColor: 'rgb(224, 224, 224)',
            borderColor: 'rgb(0, 0, 0)',
            data: confirmedCases
        }
      ]
    },
    options: {
        scales: {
            yAxes: [{
              gridLines: {
                drawTicks: true,
               },
                ticks: {

                  display : true,
                    // Include a percent sign in the ticks
                    callback: function(value, index, values) {
                        return value + '%';
                    }
                },
                scaleLabel: {
                    display: true,
                    labelString: '%'
                }
            }]
        }
    }
  });

如果有人能给我指点，我将不胜感激。

Answer 1

您可以在图表选项中定义 tooltips.callbacks.label 函数，如下所示：

tooltips: {
  callbacks: {
    label: (tooltipItem, data) => data.datasets[tooltipItem.datasetIndex].label + ': ' + tooltipItem.yLabel + '%'
  }
},

请查看您修改后的代码，看看它是如何工作的。

let chart = new Chart('myChart', {
  type: 'line',
  data: {
    labels: ['A', 'B', 'C', 'D', 'E', ],
    datasets: [{
      label: 'Casos confirmados',
      backgroundColor: 'rgb(224, 224, 224)',
      borderColor: 'rgb(0, 0, 0)',
      data: [5, 6, 4, 3, 6]
    }]
  },
  options: {
    tooltips: {
      callbacks: {
        label: (tooltipItem, data) => data.datasets[tooltipItem.datasetIndex].label + ': ' + tooltipItem.yLabel + '%'
      }
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
          callback: value => value + '%'
        },
        scaleLabel: {
          display: true,
          labelString: '%'
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="90"></canvas>

在悬停弹出窗口中显示 y 轴数据值后的字符 Chart.js

Display character after y-axis data value in onhover pop up Chart.js

onhover

chart.js