限制Chart.js折线图上的标签编号

Question

我想从我得到的数据中显示我的图表上的所有点,但我不想显示它们的所有标签,因为那时图表不是很易读.我在文档中寻找它,但找不到任何限制它的参数.

我不想只拿三个标签,因为那时图表也只限于三个点.可能吗？

我现在有类似的东西:

如果我可以留下每个第三个第四个标签,那就太好了.但我发现标签选项绝对没有.

Answer 1

尝试添加options.scales.xAxes.ticks.maxTicksLimit选项:

xAxes: [{
    type: 'time',
    ticks: {
        autoSkip: true,
        maxTicksLimit: 20
    }
}]

Answer 2

为了具体,让我们说你的原始标签列表如下:

["0", "1", "2", "3", "4", "5", "6", "7", "8"]

如果您只想显示每个第4个标签,请过滤标签列表,以便填充每个第4个标签,并且所有其他标签都是空字符串(例如["0", "", "", "", "4", "", "", "", "8"]).

Answer 3

在 Chart.js 3.2.0 中：

options: {
    scales: {
        x: {
            ticks: {
                maxTicksLimit: 10
            }
        }
    }
}

Answer 4

更新:

我使用NNick的Chart.js主分支机构更新了我的分支(截至2014年1月27日). https://github.com/hay-wire/Chart.js/tree/showXLabels

原始答案:

对于那些仍然面临这个问题的人,我将Chart.js分解了一段时间以解决同样的问题.您可以查看:https: //github.com/hay-wire/Chart.js/tree/skip-xlabels =>旧分支!检查showXLabels分支以获取最新信息.

如何使用:

适用于条形图和折线图.

用户现在可以传递一个{ showXLabels: 10 }仅显示10个标签(实际显示的标签数量可能略有不同,具体取决于x轴上存在的总标签数量,但仍然会接近10)

当有大量数据时帮助很多.早些时候,由于在狭窄空间中相互绘制的x轴标签,图形看起来过于严重.现在showXLabels,用户可以控制将标签数量减少到适合他可用空间的任何数量的标签.

请参阅附图以进行比较.

没有showXLabels选项:

随着{ showXLabels: 10 }传递到选项:

以下是对它的一些讨论:https: //github.com/nnnick/Chart.js/pull/521#issuecomment-60469304

Answer 5

对于想要在Chart JS V2上实现此目的的任何人,以下将起作用:

 var options =  {  
         scales: {
            xAxes: [{
                afterTickToLabelConversion: function(data){


                    var xLabels = data.ticks;

                    xLabels.forEach(function (labels, i) {
                        if (i % 2 == 1){
                            xLabels[i] = '';
                        }
                    });
                } 
            }]   
        }
}

然后像往常一样将options变量传递给:

myLineChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
});`

Answer 6

对于 Chart.js 3.3.2，您可以使用@Nikita Ag 的方法并进行一些更改。你可以查看文档。放入.ticks​xAxis​ scales例子：

...
options: {
    scales: {
        xAxis: {
            ticks: {
                maxTicksLimit: 10
            }
        }
    }
}
...

Answer 7

用于轴旋转

用这个：

          scales: {
        xAxes: [
          {
            // aqui controlas la cantidad de elementos en el eje horizontal con autoSkip
            ticks: {
              autoSkip: true,
              maxRotation: 0,
              minRotation: 0
            }
          }
        ]
      }