高圖-堆積列數據系列

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-01-04數據，但數據會堆積在2014-01-03上。

解決此問題的一種方法是預先填充類別並按照相同的順序插入我的y值，但這並不是解決的好方法，因為我可能會處理大量數據。

朝正確方向前進的任何技巧都將不勝感激。

---

更新：

我正在用數據庫中的值填充我的x和y坐標。 數據庫以（YYYY-mm-dd）格式給我日期。 因此，我正在使用PHP strtotime($res[0]) strtotime函數將該字符串轉換為時代時間

但是，當我填充圖表時，我看到了錯誤的日期。 我檢查了在線可用的歷元轉換器，看起來轉換是正確的，但我仍然不知道這里出了什么問題。 甚至x軸刻度也似乎略有偏離。

非常感謝您的建議。

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

---

解決：

我必須將紀元時間乘以1000。

原始答案： HighCharts-時間序列圖-xAxis上不規則的日期時間間隔

Answer 1

最好的方法可能是使用日期時間軸。 這使高圖可以知道數據包含日期，並且可以正確地整理軸。

    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則可以對標簽使用自定義功能。

演示