在 Chart.js 中格式化条形图的 yAxis 标签

Posted 2023-02-21

【中文标题】在 Chart.js 中格式化条形图的 yAxis 标签

【英文标题】：Format Bar Chart's yAxis labels in Chart.js

【发布时间】：2016-11-05 22:22:35

【问题描述】：

我查看了此处的文档和类似问题，但似乎没有找到解决问题的有效方法。

我正在使用 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/

编辑：已解决

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

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

【问题讨论】：

看看这里***.com/questions/28568773/…

@SanKrish 我做了，我包括了tooltipTemplate 和multiTooltipTemplate 他们提到的选项，但我似乎没有在我的情况下工作......也许这只适用于折线图，而不是条形图

【参考方案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 + ' %';
                    
                
            ]
        
    
);

Documentation about scales

使用% 更新小提琴：Fiddle

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

【讨论】：

这甚至解决了 scaleLabel 未能解决的问题，因为我尝试执行与 jsfiddle.net/6xV78/294 相同的操作，但由于它看起来是针对 chartjs 1.0 而不是 2.0，我想更多的事情已经改变，但我可以在回调中使用 If 语句，它工作正常。