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

<强>更新

我使用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 =＆gt;老分支！检查showXLabels分支以获取最新信息。

使用方法：

适用于条形图和折线图。

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

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

请参阅附图以进行比较。

没有showXLabels选项： enter image description here

将{ showXLabels: 10 }传入选项： enter image description here

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

Answer 4

对于希望在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 5

According to the chart.js github issue #12. Current solutions include:

Use 2.0 alpha (not production)
Hide x-axis at all when it becames too crowd (cannot accept at all)
manually control label skip of x-axis (not in responsive page)

However, after a few minutes, I thinks there's a better solution.

The following snippet will hide labels automatically. By modify xLabels with empty string before invoke draw() and restore them after then. Even more, re-rotating x labels can be applied as there's more space after hiding.

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

Please notice that clone is an external dependency.

Answer 6

在 chart.js 3.2.0 中

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

Answer 7

我有类似的问题，并为我的具体问题show label in tooltip but not in x axis for chartjs line chart提供了一个很好的解决方案。看看这有助于你

Answer 8

This answer就像一个魅力。

如果您想了解clone功能，请尝试以下方法：

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

Answer 9

用于轴旋转

使用此：

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

Answer 10

无论您的 chartsjs 版本如何，都要设置自定义刻度数：

yAxes: [{
    ticks: {
        stepSize: Math.round((Math.max.apply(Math, myListOfyValues) / 10)/5)*5,
        beginAtZero: true,
        precision: 0
    }
}]

10 = 滴答数

5 = 将刻度值四舍五入到最接近的 5。所有 y 值将具有相同的步长。

类似的方法也适用于 xAxes。

Answer 11

对于 Chart.js 3.3.2，您可以使用@Nikita Ag 的方法进行一些更改。您可以检查 documentation。将 ticks 放入 xAxis 中的 scales。示例：

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

Answer 12

在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)。

请注意，这很糟糕。

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

12 个答案: