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 - 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，所以零是1月。

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] type: 'category' to 'datetime'。您可以通过将前两个保持为03并将最后一个保持为04来测试它，然后它将花费04而不显示03.

<强>解决方案

替换

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

和日期到纪元时间

Date.UTC

如果要以不同格式在x轴上显示日期或使用{{1}}

，可以使用自定义功能作为标签

Demo

Highcharts - 堆积列数据系列

2 个答案: