我希望能够从所获取的数据中显示图表上的所有点，但不想显示它们的所有标签，因为这样图表就不太易读。我在文档中查找了相关参数，但未找到可以限制标签数量的参数。我不想仅取三个标签，因为这样图表也将被限制为三个点。是否有可能实现？目前我的代码如下：
如果我只能留下每三到四个标签，那就太好了。但是我发现关于标签选项的内容完全没有。
在Chart.js折线图上限制标签数量
126
- mmmm
5
你能提供链接吗？ - Dheeraj
要做网站吗？不，我正在开发安卓应用，这个图表是在我的本地页面上。 - mmmm
请指定您使用的库，是DevExpress的ChartJS还是Chart.js？ - Pavel Gruba
@mmmm 你有什么想法吗？我尝试了下面Nikita的答案，但是它给我留下了这个奇怪的间隙：https://jsfiddle.net/askhflajsf/xzk6sh1q/ - Mark Boulder
Nikita的回答似乎是正确的。@mmmm，请考虑将其标记为正确答案https://dev59.com/1WEh5IYBdhLWcg3wwlq8#39326127 - Caio Cunha
15个回答
220
尝试添加options.scales.xAxes.ticks.maxTicksLimit选项：
xAxes: [{
type: 'time',
ticks: {
autoSkip: true,
maxTicksLimit: 20
}
}]
- Nikita Ag
7
4上面的回答再加上这个回答https://dev59.com/TloU5IYBdhLWcg3wp4H7#37257056，真的很棒。 - Vinayak Garg
3这里出了问题。我在最后两个刻度之间看到了一个很大的间隔：https://jsfiddle.net/askhflajsf/xzk6sh1q/ - Mark Boulder
3你从哪里获取这些信息的？我在阅读 Chart.js 的很多答案，但无法在他们的文档 http://www.chartjs.org/docs/latest/ 中找到。我是否错过了一些可以找到所有这些小属性和可重写回调的地方的地方？ - Max Yari
1先生，您真棒！ - JGCW
2如果你希望在开始下落标签之前不旋转它们，你也可以添加
maxRotation: 0。 - Caio Cunha显示剩余2条评论
24
具体来说，假设你的原始标签列表如下：
["0", "1", "2", "3", "4", "5", "6", "7", "8"]
如果你只想显示每4个标签中的一个，那么过滤你的标签列表，使得每4个标签中有一个被填充，其他都是空字符串（例如 ["0"，""，""，""，"4"，""，""，""，"8"] ）。
- ben
4
47请注意，传递
""还会删除图表上对应的工具提示！ - Haywire3如果我没错的话，如果您想显示每第十个标签，这可以轻松地通过列表推导来完成：
my_labels = [my_labels[i] if i % 10 == 0 else "" for i in range(len(my_list))]。当然，数字10可以在文件开头声明为常量，以便更轻松地参数化该过程。 - pkaramol1它也可以在没有
"" 的情况下完成，就像在这个问题的回答中 使用chart.js出现垂直网格线问题 中一样，其中 OP 遇到了黑色线条出现在这个双引号的第一次出现时的问题，在这种情况下，它有帮助，正如 @haywire 所提到的，它会从工具提示中删除标签。 - Mi-Creativity19
对于任何想在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变量传递给a：
myLineChart = new Chart(ctx, {
type: 'line',
data: data,
options: options
});`
- George D
17
更新：
我已经使用最新的代码从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轴标签在狭小的空间中相互绘制，图表看起来非常混乱。使用 showXLabels，用户现在可以控制将标签数量减少到适合其可用空间的任何数量。
请参见附加的图像进行比较。
没有 showXLabels 选项：
使用传递进选项的 { showXLabels: 10 }：
这里有一些关于它的讨论：
这里是关于Chart.js的一个问题的解决方案，涉及到了IT技术。- Haywire
5
很想使用这个，但我一定是做错了什么。我参考了https://github.com/hay-wire/Chart.js/blob/showXLabels/Chart.js，但截至2015年10月30日，它不起作用，甚至不包含“showXLabels”一词。旧版本的https://github.com/hay-wire/Chart.js/blob/skip-xlabels/Chart.js可以正常工作。希望能获得最新版本的可工作、已标记版本，以便我可以安全地从RawGit进行CDN链接。这个Fiddle（虽然不是只有问题）展示了我的意思：https://jsfiddle.net/45cLcxdh/14/。 - rkagerer
尝试使用这个，但似乎 'Chart.Line.js' 没有被使用，因此没有任何变化。我使用了 "new Chart(ctx).Line(data, options);" 来创建图表。 - FlyingNimbus
使用 Chart JS 2.6.0，但选项无效。最终我不得不使用 @ben 的答案 https://dev59.com/1WEh5IYBdhLWcg3wwlq8#26183983。 - 3bdalla
1我认为这是先前版本的一部分。 - alexalejandroem
@alexalejandroem 是的，它在2014年就已经得到了回答！;-) - Haywire
12
对于Chart.js 3.3.2版本，您可以使用@Nikita Ag的方法，稍作修改即可。您可以查看文档。将ticks放置在scales中的xAxis中。例如：
...
options: {
scales: {
xAxis: {
ticks: {
maxTicksLimit: 10
}
}
}
}
...
- busterroni
12
在 Chart.js 3.2.0 中：
options: {
scales: {
x: {
ticks: {
maxTicksLimit: 10
}
}
}
}
- Vyshnav MK
9
对于轴旋转，使用以下方法：
使用这个：
scales: {
xAxes: [
{
// aqui controlas la cantidad de elementos en el eje horizontal con autoSkip
ticks: {
autoSkip: true,
maxRotation: 0,
minRotation: 0
}
}
]
}
- Edgar Olivar
2
你可以将其限制为：
scales: {
x: {
ticks: {
// For a category axis, the val is the index so the lookup via getLabelForValue is needed
callback: function(val, index) {
// Hide the label of every 2nd dataset
return index % 5 === 0 ? this.getLabelForValue(val) : '';
},
}
}
}
这将跳过4个标签，仅设置第5个标签。
- Muhammad Zakaria
2
根据chart.js github问题＃12，当前的解决方案包括：
以下代码段将自动隐藏标签。在调用
请注意，
- 使用2.0 alpha（不是生产环境）
- 当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;
}
});
请注意，
clone 是一个外部依赖项。- yegong
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接