javascript - 在 Chart.js 中格式化条形图的 y 轴标签

我已经查看了文档和这里的类似问题，但似乎找不到解决我问题的可行方法。

我正在使用 Chart.js v.2.1.6，并且我有一个柱状图，其中百分比值存储为数字（已经乘以 100）。我需要 y 轴标签和工具提示在数值后显示 % 符号。

有人可以对此事提供一些见解吗？

这是我的代码：

var data = {
  "labels": ["Label1", "Label2", "Label3", "Label4", "Label5"],
  "datasets": [{
    "label": "Variation",
    "data": ["56", "-82.3", "25.7", "32.2", "49.99"],
    "borderWidth": 1,
    "backgroundColor": "rgba(231, 76, 60, 0.2)",
    "borderColor": "rgba(231, 76, 60, 1)"
  }]
};

var myBarChart = new Chart($("#myCanvas"), {
  type: 'bar',
  data: data,
  maintainAspectRatio: false
});

还有一个 fiddle：https://jsfiddle.net/tdjk3ncs/

编辑：已解决

多亏了 miquelarranz，我找到了这个解决方案，请查看更新后的 fiddle：

https://jsfiddle.net/tdjk3ncs/7/

答案＃1

如果你想在 Y 轴的数值后添加 %，你可以在图表配置中使用刻度来实现。你的代码将如下所示：

var myBarChart = new Chart($("#myCanvas"), {
    type: 'bar',
    data: data,
    maintainAspectRatio: false,
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    // Create scientific notation labels
                    callback: function(value, index, values) {
                        return value + ' %';
                    }
                }
            }]
        }
    }
});

关于比例的文档

Fiddle 已更新，带有 %：Fiddle

如果你想修改工具提示中显示的文本，你可以通过回调轻松更改它。你可以在这里找到更多信息：工具提示回调