在图表上限定标签号。js折线图

I want to display all of the points on my chart from the data I get, but I don't want to display all the labels for them, because then the chart is not very readable. I was looking for it in the docs, but couldn't find any parameter that would limit this.

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

I don't want to take only three labels for example, because then the chart is also limited to three points. Is it possible?

我不想只取三个标签，因为这个图表也被限制在三个点上。是可能的吗?

I have something like that right now:

我现在有这样的东西:

If I could just leave every third-fourth label, it would be great. But I found absolutely nothing about labels options.

如果我能把每四分之三的标签都去掉，那就太棒了。但我对标签的选择完全没有发现。

8 个解决方案

#1

Try adding the options.scales.xAxes.ticks.maxTicksLimit option:

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

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

#2

For concreteness, let's say your original list of labels looks like:

具体来说，假设你最初的标签列表是这样的:

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

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

If you only want to display every 4th label, filter your list of labels so that every 4th label is filled in, and all others are the empty string (e.g. ["0", "", "", "", "4", "", "", "", "8"]).

如果你只想显示每四个标签，过滤你的标签列表，这样每四个标签都被填满，其他的都是空的字符串(例如，0，“，”，“，”，“，”，“，”，“，”，“8”)。

#3

UPDATE:

更新:

I'v updated my fork with the latest pull (as of Jan 27, 2014) from NNick's Chart.js master branch. https://github.com/hay-wire/Chart.js/tree/showXLabels

我更新了我的叉子与最新拉(从2014年1月27日)从NNick的图表。js主分支。https://github.com/hay-wire/Chart.js/tree/showXLabels

ORIGINAL ANSWER:

最初的回答:

For those still facing this issue, I forked Chart.js a while back to solve the same problem. You can check it out on: https://github.com/hay-wire/Chart.js/tree/skip-xlabels => Older branch! Check showXLabels branch for latest pull.

对于那些仍然面临这个问题的人来说，我忘记了图表。js一会儿回来解决同样的问题。您可以在:https://github.com/hay- wire/chart.js/tree/skip -xlabel =>旧的分支上查看它!检查showxlabel分公司的最新拉。

How to use:

如何使用:

Applicable to bar chart and line chart.

适用于条形图和折线图。

User can now pass a { showXLabels: 10 } to display only 10 labels (actual displayed labels count might be a bit different depending on the number of total labels present on x axis, but it will still remain close to 10 however)

用户现在可以传递一个{showxtags: 10}来只显示10个标签(实际显示的标签数量可能会根据x轴上显示的标签总数有所不同，但仍将接近10个)

Helps a lot when there is a very large amount of data. Earlier, the graph used to look devastated due to x axis labels drawn over each other in the cramped space. With showXLabels, user now has the control to reduce the number of labels to whatever number of labels fit good into the space available to him.

当有大量的数据时，会有很大的帮助。早些时候，由于在拥挤的空间中相互吸引的x轴标签，这张图看起来很糟糕。有了showxlabel，用户现在可以控制将标签的数量减少到适合他的空间的任何数量。

See the attached images for a comparison.

查看所附的图片进行比较。

Without showXLabels option:

如果没有showXLabels选项:

With { showXLabels: 10 } passed into option:

使用{showxlabel: 10}进入选项:

Here's some discussion on it: https://github.com/nnnick/Chart.js/pull/521#issuecomment-60469304

这里有一些关于它的讨论:https://github.com/nnnick/Chart.js/pull/521# release -60469304。

#4

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

对于任何希望在图JS V2中实现这一点的人来说，以下方法都是有效的:

 var options =  {  
         scales: {
            xAxes: [{
                afterTickToLabelConversion: function(data){


                    var xLabels = data.ticks;

                    xLabels.forEach(function (labels, i) {
                        if (i % 2 == 1){
                            xLabels[i] = '';
                        }
                    });
                } 
            }]   
        }
}

Then pass the options variable as usual into a:

然后像往常一样将options变量传递给a:

myLineChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
});`

#5

According to the chart.js github issue #12. Current solutions include:

根据图表。js github问题# 12。当前的解决方案包括:

1. Use 2.0 alpha (not production)
2. 使用2.0 alpha(不是产品)
3. Hide x-axis at all when it becames too crowd (cannot accept at all)
4. 当x轴太拥挤时(完全不能接受)，完全隐藏x轴
5. manually control label skip of x-axis (not in responsive page)
6. 手动控制x轴标签跳转(不在响应页面)

However, after a few minutes, I thinks there's a better solution.

然而，几分钟后，我认为有更好的解决方案。

The following snippet will hide labels automatically. By modify xLabels with empty string before invoke draw() and restore them after then. Even more, re-rotating x labels can be applied as there's more space after hiding.

下面的代码片段将自动隐藏标签。通过在调用draw()之前使用空字符串修改xlabel，然后在之后恢复它们。甚至，由于隐藏后空间更大，可以重新旋转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.

请注意克隆是一个外部依赖项。

#6

i had a similar type of issue, and was given a nice solution to my specific issue show label in tooltip but not in x axis for chartjs line chart. See if this helps you

我遇到了类似的问题，并得到了一个很好的解决方案来解决我的问题，在工具提示中显示标签，而不是在x轴中显示chartjs线形图。看看这是否对你有帮助

#7

This answer works like a charm.

这个答案很有魅力。

If you are wondering about the clone function, try this one:

如果你想知道克隆的功能，试试这个:

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

#8

In the Chart.js file, you should find (on line 884 for me)

在表格中。js文件，你应该找到(我在第884行)

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

If you just wrap that one line call to fillText with if ( i % config.xFreq === 0){ ... } 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).

如果您只是用If (i % config)将一行调用包装到fillText。xFreq = = = 0){…然后在Chart . line .defaults中添加一些东西xFreq: 1当你调用new Chart(ctx)时，你应该能够在你的选项中使用xFreq。行(数据选项)。

Mind you this is pretty hacky.

请注意，这太陈腐了。