javascript - 如何使用高库存在堆叠列中显示时间值

Question

我正在尝试在 Highstock 中创建堆叠列。在下面的js fiddle 中。 代码是

    //http://jsfiddle.net/nishants/y0t130f3/2/

    $(function () {
        $('#container').highcharts('StockChart',{
            chart: {
                type: 'column'
            },
            title: {
                text: 'Stacked column chart'
            },
            xAxis: {
                categories: [new Date(2014, 5, 30).getTime()/1000,new Date(2014, 5, 29).getTime()/1000,new Date(2014, 5, 28).getTime()/1000,new Date(2014, 5, 27).getTime()/1000,new Date(2014, 5, 26).getTime()/1000,new Date(2014, 5, 25).getTime()/1000,new Date(2014, 5, 24).getTime()/1000,new Date(2014, 5, 23).getTime()/1000,new Date(2014, 5, 22).getTime()/1000,new Date(2014, 5, 21).getTime()/1000,new Date(2014, 5, 20).getTime()/1000,new Date(2014, 5, 19).getTime()/1000,new Date(2014, 5, 18).getTime()/1000,new Date(2014, 5, 17).getTime()/1000,new Date(2014, 5, 16).getTime()/1000,new Date(2014, 5, 15).getTime()/1000,new Date(2014, 5, 14).getTime()/1000,new Date(2014, 5, 13).getTime()/1000,new Date(2014, 5, 12).getTime()/1000,new Date(2014, 5, 11).getTime()/1000 ]
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Total fruit consumption'
                },
                stackLabels: {
                    enabled: true,
                    style: {
                        fontWeight: 'bold',
                        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                    }
                }
            },
            legend: {
                align: 'right',
                x: -70,
                verticalAlign: 'top',
                y: 20,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
                borderColor: '#CCC',
                borderWidth: 1,
                shadow: false
            },
            tooltip: {
                formatter: function () {
                    return '' + this.x + '
' +
                        this.series.name + ': ' + this.y + '
' +
                        'Total: ' + this.point.stackTotal;
                }
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true,
                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                        style: {
                            textShadow: '0 0 3px black, 0 0 3px black'
                        }
                    }
                }
            },
            series: [{
                name: 'John',
                data: [5, 3, 4, 7, 2,5, 3, 4, 7, 2,5, 3, 4, 7, 2,5, 3, 4, 7, 2,]
            }, {
                name: 'Jane',
                data: [2, 2, 3, 2, 1,2, 2, 3, 2, 1,2, 2, 3, 2, 1,2, 2, 3, 2, 1,]
            }, {
                name: 'Joe',
                data: [3, 4, 4, 2, 5,3, 4, 4, 2, 5,3, 4, 4, 2, 5,3, 4, 4, 2, 5,]
            }]
        });
    });

x 轴上的代码应为从 11/05/2014 到 30/05/2014 的日期。我尝试了所有新的日期 unix 时间戳和 unix 时间戳/1000。但没有任何作用。我想要实现的是 非常简单 => 如何将日期放在 highstock 的 x 轴上。

Answer 1

与 HighCharts 不同，我认为 HighStock 不支持 xAxis.categories 配置。

但是，您可以直接在 serie.data 中指定日期，如下所示:

{
    name: 'John',
    data: [
        [new Date(2014, 5, 11).getTime(), 5],
        [new Date(2014, 5, 12).getTime(), 3],
        [new Date(2014, 5, 13).getTime(), 4],
        ...
    ]
}

并且日期必须按升序排列，否则图表将被破坏。

另一件事是您可能希望设置它以使列与日期标签正确对齐。

plotOptions: {
    column: {

        ...

        dataGrouping: {
            enabled: true,
            forced: true,
            units: [
                ['day', [1]]
            ]
        }
    }
},

示例 JSFiddle: http://jsfiddle.net/1xLny72q/2/

希望这有帮助。