如何在Chart.js折线图上自定义y轴标签? [英] How do I customize y-axis labels on a Chart.js line chart?

问题描述

我有以下图表，想手动设置Y轴标签.而不是使用1,2,3,4,5，我想要一个，两个，三个，四个，五个.
有没有办法做到这一点?这是我的选项结构:

I have the following chart and would like to manually set the Y axis labels. Instead of using 1,2,3,4,5, I want One, Two, Three, Four, Five.
Is there a way to do this? Here's my options structure:

    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}
        }]
       },
     };

推荐答案

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

In the ticks object you can pass a callback that will be given the label it is about to show. From here you just return a string you wish to display in place of the label.

小提琴示例

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

这篇关于如何在Chart.js折线图上自定义y轴标签?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！