chart.js - 如何自定义 Chart.js 折线图上的 y 轴标签？

Question

我有以下图表，想手动设置 Y 轴标签。我想要一、二、三、四、五，而不是使用 1、2、3、4、5。
有没有办法做到这一点？这是我的选项结构：

    options = {
      scales: {
        yAxes: [{
          scaleLabel: { labelString: ["One", "Two", "Three", "Four", "Five"] },
          ticks: { min: 1, max: 5, stepSize: 1, suggestedMin: 0.5, suggestedMax: 5.5},
          gridLines: {display: false}
        }]
       },
     };

Answer 1

在ticks对象中，您可以传递一个callback将被赋予它即将显示的标签的标签。从这里您只需返回一个您希望显示的字符串来代替标签。

小提琴示例

ticks: {
    min: 0,
    max: 5,
    stepSize: 1,
    suggestedMin: 0.5,
    suggestedMax: 5.5,
    callback: function(label, index, labels) {
        switch (label) {
            case 0:
                return 'ZERO';
            case 1:
                return 'ONE';
            case 2:
                return 'TWO';
            case 3:
                return 'THREE';
            case 4:
                return 'FOUR';
            case 5:
                return 'FIVE';
        }
    }
}