我使用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
,你可以使用标签的自定义功能
演示