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

我想根据我得到的数据显示图表上的所有点，但我不想显示它们的所有标签，因为这样图表就不太可读了。我在文档中查找它，但找不到任何限制它的参数

我不想仅以三个标签为例，因为图表也被限制为三个点。可能吗

我现在有类似的事情：

---

如果我能每三到四个标签就留下一个，那就太好了。但是我完全没有找到关于标签选项的任何信息。

在Chart.js文件中，您应该可以找到（我在第884行）

如果您只是用

If（i%config.xFreq==0）{…}

然后在

chart.Line.defaults

中添加一些行

xFreq:1

调用

new chart（ctx.Line）（数据，选项）

时，您应该能够开始在

选项中使用
xFreq

请注意，这是非常粗糙的。
为了具体起见，让我们假设您的原始标签列表如下所示：

[“0”、“1”、“2”、“3”、“4”、“5”、“6”、“7”、“8”]

如果您只想显示每四个标签，请过滤标签列表，以便填写每四个标签，所有其他标签均为空字符串（例如，
[“0”、“4”、“4”、“4”、“8”、“8”）
。
更新：

我用NNick的Chart.js主分支的最新版本（截至2014年1月27日）更新了我的fork。

原始答案：

对于那些仍然面临这个问题的人，我在前一段时间分叉了Chart.js来解决同样的问题。您可以在以下网址查看：
=>老分支！检查showXLabels分支的最新拉力

如何使用：

适用于条形图和折线图

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

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

请参阅附件中的图像以进行比较

不带
showXLabels
选项：

将
{showXLabels:10}
传递到选项：

下面是一些关于它的讨论：
我也有类似的问题，我的具体问题得到了很好的解决方案。查看这是否有助于您
。目前的解决办法包括：

使用2.0 alpha（非生产）
当x轴过于拥挤时，完全隐藏x轴（根本无法接受）
手动控制x轴的标签跳过（不在响应页面中）
然而，几分钟后，我认为有一个更好的解决方案

以下代码段将自动隐藏标签。通过在调用
draw（）
之前使用空字符串修改
xLabels
，然后恢复它们。更重要的是，可以应用重新旋转的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;
    }
});

var axisFixedDrawFn=function（）{
var self=这个
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
如果（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
对于（变量i=0；i

请注意，
clone
是一个外部依赖项。
像一个符咒一样工作

如果您想了解
克隆
功能，请尝试以下功能：

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

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

尝试添加选项：

用于轴旋转

使用以下命令：

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

在chart.js 3.2.0中

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

要设置自定义刻度数，而不考虑您的图表版本，请执行以下操作：

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

10=滴答声的数量

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

类似的功能也适用于xAxes。
您能提供指向网站的链接吗？不，我正在android上做应用程序，这个图表在我的本地页面上。请指定你使用哪个库，DevExpress的ChartJS或chart.js？@mmmm你找到什么了吗？我尝试了尼基塔下面的答案，但它给我留下了一个奇怪的空白：尼基塔的答案似乎是正确的@嗯，请考虑把它标记为正确答案。这是一个伟大的黑客，谢谢！我添加了它。注意传递
”
al
options: {
    scales: {
      x: {
        ticks: {
            maxTicksLimit: 10
            }
        }
     }
 }

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