x轴上的日期与highcharts

时间:2015-02-03 14:33:25

标签: javascript jquery highcharts

我需要在我的图表上使用xaxis上的日期。我通过范围日期选择器收集我的数据,用户可以输入14天的范围。我需要xaxis上的第一个值是范围的开始日期,最后一个值是范围的结束日期。 我想让xaxis标签看起来像" 2015年1月27日" ," 2015年1月28日"或者那个方向的东西,每个抽搐是1天。我已经阅读了API文档,并且我已经玩了很多图表的设置,但由于某些原因我无法让它工作。

            $('#graphColumn').highcharts({
                title: {
                    text: '',
                    x: -20 //center
                },
                xAxis: {
                    categories: [dayArray[0], dayArray[1], dayArray[2], dayArray[3], dayArray[4], dayArray[5], dayArray[6], dayArray[7], dayArray[8], dayArray[9], dayArray[10], dayArray[11], dayArray[12], dayArray[13]]
                },
                yAxis: {
                    title: {
                        text: ''
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    valueSuffix: ''
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    borderWidth: 0
                },
                credits: {
                    enabled: false
                },
                series: [{
                    showInLegend: false,
                    name: ' ',
                    data: series,
                    color: '#77B7C5',
                    marker: {
                        symbol: 'circle'
                    }
                }, {
                    showInLegend: false,
                    name: '1 år sedan',
                    data: series1yearago,
                    color: "#71C73E",
                    marker: {
                        symbol: 'circle'
                    }
                }]
            });

这是我的图表。我知道xaxis现在已经设置了类别,但仅限于目前,我知道它应该是datetime。我的系列是常规的int数组,每个索引都有一个数字。我会在这里给出任何帮助!

编辑:这是一个有效的jsfiddle示例:http://jsfiddle.net/g0p00tLv/1

1 个答案:

答案 0 :(得分:0)

您的数据以及格式化方式是我们真正需要看到的。

您需要做以下两件事之一:

1)将数据作为[x,y]对的数组传递,其中x是纪元时间戳(以毫秒为单位),或者是date.UTC对象

2)将您的数据作为y值的单个数组传递,并使用pointStart和pointInterval属性正确设置日期轴。

参考:

如果您需要更多信息,请设置一个工作小提琴示例并在此处发布。