在Chart.js中格式化条形图的yAxis标签 [英] Format Bar Chart's yAxis labels in Chart.js

问题描述

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

I have looked the documentation and similar questions here but I don't seem to find a working solution to my problem.

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

I'm using Chart.js v.2.1.6, and I have a Bar Chart with percentage values stored as numbers (already multiplied by 100). I need both y-axis labels and tooltips to display the % sign after the values.

有人可以摆脱一些关于那个问题？

Someone can shed some light on that matter?

这里有我的代码：

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

还有一个小提琴： https://jsfiddle.net/tdjk3ncs/

编辑：已解决

我找到了解决方案感谢miquelarranz，找到更新的小提琴：

I found the solution thanks to miquelarranz, find the updated fiddle:

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

推荐答案

如果要在Y轴的值之后添加％，可以使用图表配置中的比例来执行此操作。您的代码如下所示：

If you want to add %after the values of the Y-Axis you can do it using scales in your chart configuration. Your code will look like this:

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 + ' %';
                    }
                }
            }]
        }
    }
});

有关秤的文档

使用％更新小提琴： 小提琴

如果你想修改工具提示中显示的文本可以使用回调轻松更改。您可以在此处找到更多信息 Tooltip Callbacks

And if you want to modify the text displayed in the tooltips you can easily change it using callback. You can find more information here Tooltip Callbacks

这篇关于在Chart.js中格式化条形图的yAxis标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！