在Chart.js折线图中更改x轴标签

时间:2022-03-23 20:24:29

Is it possible to set custom x axis labels in Chart.js? Currently I'm using my array of indexes but is is hard to read anything on this chart, so I would like to scale it and show only specified indexes. For example: instead [1,2,3,4,5,6,7,8,9,10], I would like to set [1,5,10]

是否可以在Chart.js中设置自定义x轴标签?目前我正在使用我的索引数组但是很难在这个图表上读取任何内容,因此我想缩放它并仅显示指定的索引。例如:相反[1,2,3,4,5,6,7,8,9,10],我想设置[1,5,10]

1 个解决方案

#1


7  

With Chart.js you can't override the horizontal axis labels. Its a great library, sad it doesn't support this.

使用Chart.js,您无法覆盖水平轴标签。它是一个很棒的图书馆,很遗憾它不支持这个。

The easiest way to do it, without getting into the Chart.js code and without redrawing the canvas, is to leave the label cell with an empty string.

最简单的方法是在不进入Chart.js代码而不重绘画布的情况下,将标签单元格留空。

For example, if you just want to show the x axis label every 10 points, you can do something like this when generating the labels:

例如,如果您只想每10个点显示x轴标签,则可以在生成标签时执行以下操作:

    if (ix % 10 == 0) {
        labels[ix]="Label";
    } else {
        labels[ix]="";
    }

#1


7  

With Chart.js you can't override the horizontal axis labels. Its a great library, sad it doesn't support this.

使用Chart.js,您无法覆盖水平轴标签。它是一个很棒的图书馆,很遗憾它不支持这个。

The easiest way to do it, without getting into the Chart.js code and without redrawing the canvas, is to leave the label cell with an empty string.

最简单的方法是在不进入Chart.js代码而不重绘画布的情况下,将标签单元格留空。

For example, if you just want to show the x axis label every 10 points, you can do something like this when generating the labels:

例如,如果您只想每10个点显示x轴标签,则可以在生成标签时执行以下操作:

    if (ix % 10 == 0) {
        labels[ix]="Label";
    } else {
        labels[ix]="";
    }