Highcharts - 堆积列数据系列

Question

我正在使用 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 年 1 月 4 日的苹果数据，而是堆积在 2014 年 1 月 3 日的数据。

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

非常感谢任何朝着正确方向前进的提示。

---

更新：

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

但是当我填充绘制高图时，我看到了错误的日期。我检查了在线可用的时代转换器，看起来转换是正确的，但我仍然无法弄清楚这里有什么问题。 甚至 x 轴刻度似乎也略有偏差。

非常感谢您的建议。

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

---

已解决：

我必须将纪元时间乘以 1000。这行得通。

原答案：HighCharts - timeseries chart - irregular datetime interval on xAxis

Answer 1

可能最好的方法是使用日期时间轴。这样可以让 highcharts 知道数据中包含日期，并且可以正确的对轴进行排序。

    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/

Answer 2

问题是你标记的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，您可以使用自定义标签函数

Demo