限制Chart.js折线图上的标签数量

我想从获取的数据中显示图表上的所有点，但我不想显示它们的所有标签，因为那样的话，图表就不太可读了。我在文档中寻找它，但是找不到任何可以限制它的参数。

我不想仅以三个标签为例，因为那时图表也仅限于三个点。可能吗？

我现在有类似的东西：

如果我能留下每三分之四的标签，那就太好了。但是我对标签选项一无所获。

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

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

为了具体起见，假设您的原始标签列表如下所示：

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

如果您只想显示每个第4个标签，请过滤标签列表，以便每个第4个标签都被填充，所有其他标签都是空字符串（例如["0", "", "", "", "4", "", "", "", "8"]）。

对于希望在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
});`

更新：

我已使用NNick的Chart.js master分支的最新拉力（截至2014年1月27日）更新了我的叉子。 https://github.com/hay-wire/Chart.js/tree/showXLabels

原始答案：

对于那些仍然面临此问题的人，我花了很长时间来解决这个问题。您可以在以下位置查看它：https : //github.com/hay-wire/Chart.js/tree/skip-xlabels =>较旧的分支！检查showXLabels分支以获取最新拉取。

如何使用：

适用于条形图和折线图。

用户现在可以传递a { showXLabels: 10 }来仅显示10个标签（实际显示的标签数可能会有所不同，具体取决于x轴上显示的标签总数，但仍然保持接近10）

当数据量非常大时会很有帮助。早些时候，由于在狭窄的空间中相互重叠的x轴标签，该图看上去看上去很破灭。使用showXLabels，用户现在可以控制将标签数量减少到适合其可用空间的任意数量的标签。

请参阅所附图像进行比较。

没有showXLabels选项：

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

这是关于它的一些讨论：https : //github.com/nnnick/Chart.js/pull/521#issuecomment-60469304

用于轴旋转

用这个：

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

根据chart.js github问题＃12。当前的解决方案包括：

1. 使用2.0 Alpha（非正式版）
2. 当x轴变得太拥挤时根本隐藏它（根本无法接受）
3. 手动控制x轴的标签跳跃（不在响应页面中）

但是，几分钟后，我认为有更好的解决方案。

以下代码段将自动隐藏标签。通过xLabels在调用之前用空字符串进行修改，draw()然后在之后进行恢复。此外，由于隐藏后还有更多空间，因此可以应用重新旋转的x标签。

var axisFixedDrawFn = function() {
    var self = this
    var widthPerXLabel = (self.width - self.xScalePaddingLeft - self.xScalePaddingRight) / self.xLabels.length
    var xLabelPerFontSize = self.fontSize / widthPerXLabel
    var xLabelStep = Math.ceil(xLabelPerFontSize)
    var xLabelRotationOld = null
    var xLabelsOld = null
    if (xLabelStep > 1) {
        var widthPerSkipedXLabel = (self.width - self.xScalePaddingLeft - self.xScalePaddingRight) / (self.xLabels.length / xLabelStep)
        xLabelRotationOld = self.xLabelRotation
        xLabelsOld = clone(self.xLabels)
        self.xLabelRotation = Math.asin(self.fontSize / widthPerSkipedXLabel) / Math.PI * 180
        for (var i = 0; i < self.xLabels.length; ++i) {
            if (i % xLabelStep != 0) {
                self.xLabels[i] = ''
            }
        }
    }
    Chart.Scale.prototype.draw.apply(self, arguments);
    if (xLabelRotationOld != null) {
        self.xLabelRotation = xLabelRotationOld
    }
    if (xLabelsOld != null) {
        self.xLabels = xLabelsOld
    }
};

Chart.types.Bar.extend({
    name : "AxisFixedBar",
    initialize : function(data) {
        Chart.types.Bar.prototype.initialize.apply(this, arguments);
        this.scale.draw = axisFixedDrawFn;
    }
});

Chart.types.Line.extend({
    name : "AxisFixedLine",
    initialize : function(data) {
        Chart.types.Line.prototype.initialize.apply(this, arguments);
        this.scale.draw = axisFixedDrawFn;
    }
});

请注意，这clone是一个外部依赖关系。

我遇到了类似的问题，并且在工具提示中为我的特定问题显示标签提供了一个很好的解决方案，但在Chartjs折线图的x轴中没有。看看这是否对您有帮助

这个答案就像一个魅力。

如果您想知道该clone功能，请尝试以下一项：

var clone = function(el){ return el.slice(0); }

在Chart.js文件中，您应该找到（对我来说是884行）

var Line = function(...
    ...
    function drawScale(){
        ...
        ctx.fillText(data.labels[i], 0,0);
        ...

如果仅将一个线路呼叫包装到fillText， if ( i % config.xFreq === 0){ ... } 然后chart.Line.defaults添加一些线路xFreq : 1，则应该可以xFreq在options呼叫时开始使用new Chart(ctx).Line(data, options)。

提醒您，这很hacky。