我想从我得到的数据中显示图表上的所有点，但我不想显示它们的所有标签，因为这样图表的可读性不是很好。我在文档中寻找它，但找不到任何限制它的参数。
我不想只拿三个标签为例，因为那样图表也仅限于三个点。是否可以？
我现在有这样的事情：
如果我能留下每四分之三的标签，那就太好了。但我完全没有发现标签选项。
限制 Chart.js 折线图上的标签数量
IT技术
javascript
css
canvas
charts
chart.js
2021-03-15 18:52:42
6个回答
尝试添加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 主分支的最新拉取（截至 2014 年 1 月 27 日）更新了我的分支。 https://github.com/hay-wire/Chart.js/tree/showXLabels
原始答案：
对于那些仍然面临这个问题的人，我不久前 fork Chart.js 来解决同样的问题。您可以查看：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
}
}
]
}