在 Chart.js 线性图表上限制标签数量

我想显示我的图表上所有的点从我得到的数据，但我不想显示所有的标签为他们，因为那样的图表不是很可读。我在文档中寻找它，但找不到任何限制它的参数。

我不想只举三个标签为例，因为那样的话，图表也被限制为三个点。有可能吗？

I have something like that right now:

enter image description here

如果我可以留下每三个四分之一的标签，那就太好了，但是我完全没有发现任何关于标签的选择。

135061 次浏览
小开

在 Chart.js 文件中，您应该可以找到(在第884行)

var Line = function(...
...
function drawScale(){
...
ctx.fillText(data.labels[i], 0,0);
...

如果你只是用 if ( i % config.xFreq === 0){ ... }包装一个到 fillText的线路调用 and then in chart.Line.defaults add something line xFreq : 1 you should be able to start using xFreq in your options when you call new Chart(ctx).Line(data, options).

提醒你一下，这个很粗糙。

小开

为了具体起见，让我们假设您的原始标签列表如下:

["0", "1", "2", "3", "4", "5", "6", "7", "8"]

如果您只想显示每个第4个标签，那么过滤您的标签列表，以便填充每个第4个标签，并且所有其他标签都是空字符串(例如 ["0", "", "", "", "4", "", "", "", "8"])。

小开

更新:

我更新了我的 fork，使用了来自 NNick’s Chart.js 主分支的最新的 pull (截至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 分支的最新拉动。

How to use:

适用于条形图和直线图。

用户现在可以传递一个 { 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

小开

我有一个类似的问题类型，并提供了一个很好的解决方案，我的具体问题 在工具提示中显示标签，而不是在图表的 x 轴线图表中显示标签。看看这能不能帮到你

小开

目前的解决方案包括:

  1. 使用2.0 alpha (非生产)
  2. 当 x 轴变得过于拥挤时隐藏它(完全不能接受)
  3. 手动控制 x 轴的标签跳跃(不在响应页面)

然而，几分钟后，我认为有一个更好的解决办法。

下面的代码片段将隐藏标签 automatically。通过在调用 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;
}
});

Please notice that clone is an external dependency.

小开

这个回答真是妙不可言。

如果你想知道 clone函数，试试这个:

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

For anyone looking to achieve this on Chart JS V2 the following will work: 

 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
});`
小开
最佳答案

尝试添加 options.scales.xAxes.ticks.maxTicksLimit选项:

xAxes: [{
type: 'time',
ticks: {
autoSkip: true,
maxTicksLimit: 20
}
}]
小开

for axis rotation

use this:

          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
}
}
}
}
小开

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

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

10 = 刻度数

所有的 y 值都有相同的步长。

类似的方法也适用于 xAxes。

小开

对于 Chart.js 3.3.2，您可以使用@Nikita Ag 的方法进行一些更改。你可以检查 文件。把 ticks放在 xAxis放在 scales。例如:

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

你可以限制在

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个。

enter image description here

小开

你可使用以下代码:

xAxes: [{
ticks: {
autoSkip: true,
maxRotation: 90
}
}]
小开

对于这个新的内置特性，您可能不需要任何东西。

内置的标签自动跳过功能检测可能重叠的刻度和标签，并删除每个 n 标签，以保持显示正常。https://www.chartjs.org/docs/latest/axes/


提交答案