Question

我正在尝试在Highstock中创建堆叠列。跟随js小提琴。代码是

    //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轴上的代码应为2014年5月11日至2014年5月30日的日期。我尝试了所有新的日期 unix时间戳和unix时间戳/ 1000。但没有任何作用。我想要实现的是非常直接=＆gt;如何将日期放在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/

希望这有帮助。

Answer 2

当我们按系列制作Highstock图表时，我们不能像Highchart那样传递x轴分离数据比如你的代码

 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 ]
            },

它不适用于HighStock

为此你需要在每个系列上传递这些单独的值，如下所示

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

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

根据@ranTarm 日期必须按升序排列和 dataGrouping ，如其评论中所述

如何使用High stock显示堆积列中的时间值

2 个答案: