Highcharts-堆积列数据系列


Highcharts - Stacked column data series

我使用Highcharts处理堆叠列。

正在构建的数据序列与类似

series: [{
            name: 'Apples',
            data: [['2014-01-01',5], ['2014-01-02',3], ['2014-01-04',2], ['2014-01-05',7], ['2014-01-06',8]]
        }, {
            name: 'Oranges',
            data: [['2014-01-01',3], ['2014-01-02',7], ['2014-01-04',9], ['2014-01-05',11], ['2014-01-06',19]]
        }, {
            name: 'Grapes',
            data: [['2014-01-01',15], ['2014-01-02',23], ['2014-01-03',12], ['2014-01-05',17], ['2014-01-06',18]]
        }]

http://jsfiddle.net/emgq47px/

如果你仔细看一下数据,我缺少苹果公司的2014-01-04数据,但数据堆积在2014-01-03上。

解决这个问题的一种方法是预先填充类别,并按照相同的顺序插入y值,但这不是一个好的解决方法,因为我可能会处理大量的数据集。

任何朝着正确方向前进的提示都将不胜感激。


更新:

我正在用数据库中的值填充我的x和y坐标。数据库以(YYYY-mm-dd)格式提供日期。因此,我使用PHP strtotime($res[0]) 中的strtotime函数将该字符串转换为epoch时间

但当我填充绘制高图表时,我看到了错误的日期。我查看了在线可用的epoch转换器,看起来转换是正确的,但我仍然无法弄清楚这里出了什么问题。即使是x轴的刻度似乎也有点偏离。

非常感谢你的建议。

http://jsfiddle.net/emgq47px/3/


已解决:

我不得不把纪元时间乘以1000。这是有效的。

原始答案:HighCharts-时间序列图-xAxis 上的不规则日期时间间隔

最好的方法可能是使用日期时间轴。这使得高图可以知道数据包含日期,并且可以正确地对轴进行排序。

    xAxis: {
        lineWidth: 2,
        type: 'datetime'
    },

一旦你这样做,你需要在你的数据中提供有效的日期时间,如下所示:

 data: [[Date.UTC(2014,  0, 1),5],
        [Date.UTC(2014,  0, 2),3],
        [Date.UTC(2014,  0, 4),2],
        [Date.UTC(2014,  0, 5),7],
        [Date.UTC(2014,  0, 6),8]]

注意,月份是从0到11,而不是从1到12,所以零是一月。

http://jsfiddle.net/0ofLx86d/

问题是您将x轴类型标记为类别

xAxis: {
     lineWidth: 2,
     type: 'category'
},

因此,当您像这样将数据data: [['2014-01-01',5], ['2014-01-02',3],分配给它时,第一个值将被视为类别,因此当您将['2014-01-03',12]分配为最后一个值时,它将替换前一个['2014-01-04',12]。你可以通过保持前两个为03,最后一个为04来测试它,然后它将使用04而不显示03。

解决方案

更换

type: 'category' to 'datetime'

和日期到纪元时间

data: [[1388534400000,5], [1388620800000,3], [1388793600000,2], [1388880000000,7]]

如果你想在x轴上以不同的格式显示日期或使用Date.UTC ,你可以使用标签的自定义功能

演示