How do I customize y-axis labels on a Chart.js line chart?

只谈情不闲聊 提交于 2019-12-04 11:11:43

问题


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


回答1:


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.

fiddle exampe

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


来源:https://stackoverflow.com/questions/37708374/how-do-i-customize-y-axis-labels-on-a-chart-js-line-chart

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!