Javascript Highcharts - 显示所有其他 x 轴类别

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/3714248/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 05:49:23  来源:igfitidea点击:

Highcharts - show every other x-axis category

javascriptdatetimegraphchartshighcharts

提问by Ian McIntyre Silber

I have Highcharts set up to display a graph with a bunch of xAxis categories. This is all working fine, but I would like to be able to skip some of the xAxis categories, so not everything one is shown. You can see an example of this working within Campaign Monitor's reporting section (screenshot: http://screencast.com/t/Y2FjNzQ4Y).

我设置了 Highcharts 来显示带有一堆 xAxis 类别的图形。这一切正常,但我希望能够跳过某些 xAxis 类别,因此并非所有类别都显示出来。您可以在 Campaign Monitor 的报告部分(屏幕截图:http: //screencast.com/t/Y2FjNzQ4Y)中看到此工作的示例。

Any idea how I can achieve this same layout?

知道如何实现相同的布局吗?

采纳答案by Gazler

You can set the xAxis type as 'datetime' then set the pointInterval and PointStart in the plotoptions.

您可以将 xAxis 类型设置为 'datetime',然后在 plotoptions 中设置 pointInterval 和 PointStart。

Code example:

代码示例:

var chart;
$(document).ready(function () {
    chart = new Highcharts.Chart({
        "xAxis": {
            "type": "datetime"

        "plotOptions": {
            "line": {
                "pointInterval": 86400000,
                "pointStart": 1282408923000
            }
        },
    });
});

The figures you see for pointInterval and Start are in millisecionds which you can generate using getTime()The interval in your case would be 86400000ms which is one day. The library displays appropriate intervals based on your data interval.

您看到的 pointInterval 和 Start 的数字以毫秒为单位,您可以使用getTime()生成您的案例中的间隔为 86400000 毫秒,即一天。该库根据您的数据间隔显示适当的间隔。

回答by d2burke

It seems like the xAxis:labels:step value is what should be used to accomplish this:

似乎应该使用 xAxis:labels:step 值来完成此操作:

        xAxis: {
            categories: ['JAN', 'FEB', 'MAR', 'APR', 'MAY'],
            labels:{
                step: 2 // this will show every second label
            }
        },

Step Axis Labels

步进轴标签

Super late, but I figure this can help someone out.

太晚了,但我认为这可以帮助某人。

回答by valis

    xAxis: {
        categories: categoriesname,
        labels: {
            style: {
                color: '#000',
                font: '9px Trebuchet MS, Verdana, sans-serif'
            }
        },
        **tickInterval: TickInterval,**// SET THIS
        tickPixelInterval: 80,
        tickmarkPlacement: 'on'
    },

回答by sharavsambuu

here is my ugly solution :)

这是我丑陋的解决方案:)

I'm using array as queue. http://javascript.about.com/library/blqueue.htmif you fill point datas to the queue, you can to set datas for your chart series.

我使用数组作为队列。http://javascript.about.com/library/blqueue.htm如果您将点数据填充到队列中,您可以为您的图表系列设置数据。

var myQueue = new Array();
var myPoint = [x, y];                                       myQueue.push(myPoint);
chart.series[0].setData(myQueue);

my X axis is not a datetime, it's an integer
first 
var x = 0;

x value should be always increment when you need a new point. http://dl.dropbox.com/u/3482121/picture/highcharts/PM/Screenshot.png

当您需要新点时,x 值应始终增加。 http://dl.dropbox.com/u/3482121/picture/highcharts/PM/Screenshot.png