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
,你可以使用标签的自定义功能
演示
- 谷歌图表堆叠柱状图.如何设置每个单独堆叠项目(数据系列)的样式
- 谷歌图表API:数据系列的Z索引
- Angular Highcharts ng如何将其他数据系列设置为工具提示
- 用不同颜色填充的Highchart数据系列
- 如何为 jqPlot 中的特定数据系列设置 Stack Series false
- 为 Shield UI JavaScript 数据系列点的每个点打开特定位置
- 高图表:动态添加数据系列,并在yAxis上动态添加类别
- 在一个高图表中添加两个 json 数据系列
- 如何使用十字准线在 x 轴上设置高图表数据系列
- Highcharts极坐标图-指定数据系列&每个轴的工具提示
- 谷歌图表API:一个数据系列,两个垂直轴
- Highcharts-堆积列数据系列
- 突出显示多个数据系列
- 将JSON数据系列解析/映射为整数
- 谷歌图表:将ChartRangeFilter与数据系列选择器相结合
- 如何在谷歌图表中添加另一个数据系列
- highcharts:当添加新的数据系列时,如果标题与现有的Y轴不同,则添加新的Y轴
- 动态更改Highcharts数据系列类型
- 航路图:绘制不同颜色的点,相同的数据系列
- 高图堆叠条形图:添加类别和数据系列