在 Chart.js 中设置条形图 Y 轴标签的格式

2024-02-24

我在这里查看了文档和类似的问题,但似乎没有找到解决我的问题的可行方法。

我正在使用 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
});

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

编辑:已解决

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

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


如果您想添加%在 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 + ' %';
                    }
                }
            }]
        }
    }
});

有关秤的文档 http://www.chartjs.org/docs/#scales-common-configuration

小提琴更新了%: Fiddle https://jsfiddle.net/tdjk3ncs/6/

如果您想修改工具提示中显示的文本,您可以使用回调轻松更改它。您可以在这里找到更多信息工具提示回调 http://www.chartjs.org/docs/#chart-configuration-tooltip-configuration

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 Chart.js 中设置条形图 Y 轴标签的格式 的相关文章

随机推荐