限制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个标签，所有其他标签都是空string（例如["0", "", "", "", "4", "", "", "", "8"] ）。
更新：
我已经从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轴标签在狭小的空间中相互拉开，graphics看起来很沮丧。 使用showXLabels ，用户现在可以将标签的数量减less到适合他可用空间的任何数量的标签。
看到附加的图像进行比较。
没有showXLabels选项： 
用{ showXLabels: 10 }传入选项： 
这里有一些讨论： https : //github.com/nnnick/Chart.js/pull/521#issuecomment-60469304
对于任何想在Chart JS V2上实现这个function的人来说，
var options = { scales: { xAxes: [{ afterTickToLabelConversion: function(data){ var xLabels = data.ticks; xLabels.forEach(function (labels, i) { if (i % 2 == 1){ xLabels[i] = ''; } }); } }] } }
然后像往常一样传递optionsvariables到一个：
myLineChart = new Chart(ctx, { type: 'line', data: data, options: options });`
根据chart.js github问题＃12 。 现有解决scheme包括
- 使用2.0 alpha（不生产）
- 当它变得太人群时根本不能隐藏x轴（根本无法接受）
- 手动控制x轴的标签跳转（不在响应页面中）
但是，几分钟后，我认为有一个更好的解决scheme。
以下片段将自动隐藏标签。 通过在调用draw()之前用空string修改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; } });
请注意clone是外部依赖。
在Chart.js文件中，你应该find（在我的第884行）
var Line = function(... ... function drawScale(){ ... ctx.fillText(data.labels[i], 0,0); ...
如果你只是用if ( i % config.xFreq === 0){ ... }来包装那一行调用fillText ，然后在chart.Line.defaults添加一行xFreq : 1你应该可以开始使用xFreq在你options时候，你可以调用new Chart(ctx).Line(data, options) 。
请注意，这非常哈克。
我有一个类似的问题，并得到了一个很好的解决scheme，我的具体问题显示标签在工具提示，但不是在X轴chartjs折线图 。 看看这是否有助于你
这个答案就像一个魅力。
如果你想知道clonefunction，试试这个：
var clone = function(el){ return el.slice(0); }
