Question

我知道如何在高级图表中创建分组的常规列，我知道如何为折线图或列创建时间序列（他们有这些例子），但我似乎无法弄清楚的是如何为分组列创建时间序列。我能得到的最接近的是重叠列。

我正在寻找类似的东西（在油漆中制作）： grouped column time series chart （https://i467.photobucket.com/albums/rr40/hosoi_dan/grouped_column_time_series_zpsbd2afb7d.jpg）

以下是我的代码： `

var data =
[
    /* Apr 2013 */
    {name:"T1",x:1364774400000, y:13918927, color:"red"},
    {name:"T1",x:1364774400000, y:10920462, color:"green"},
    [1364860800000,18920462],
    [1364947200000,12971961],

    /* May 2013 */
    [1367366400000,18112671],
    [1367452800000,15072312]
];




$('#container').highcharts('StockChart', {
    chart: {
        alignTicks: false,
            type: 'column'
    },
    rangeSelector: {
        selected: 1
    },
    title: {
        text: 'AAPL Stock Volume'
    },

    series: [{
        name: 'AAPL Stock Volume',
        data: data
    }]
});

`

带有代码的jsfillde： http://jsfiddle.net/UH5wj/

Answer 1

这是一般性的想法：http://jsfiddle.net/wFpey/

因此，根据名称将数据拆分为系列。然后创建点数组，其中每个点都是对象或数组（我的例子是数组）。

var series = [ {
    name: "T1",
    data: [
        [1364774400000, 13918927], [1364974400000, 13918927]
    ],
    color: "red"
}, {
    name: "T2",
    data: [
        [1364774400000,10920462], [1364974400000, 13918927]
    ],
    color: "green"
}, {
    name: "T3",
    data: [
        [1364774400000, 12312312], [1364974400000, 13918927]
    ],
    color: "blue"
}, {
    name: "T4",
    data: [
        [1364774400000, 12311111], [1364974400000, 13918927]
    ],
    color: "yellow"
}, {
    name: "T5",
    data: [
        [1364774400000, 11233345], [1364974400000, 13918927]
    ],
    color: "gray"
}, {
    name: "T6",
    data: [
        [1364774400000, 14322311]
    ],
    color: "black"
}];

Answer 2

如果没有看到您的数据是如何进入的，我到目前为止只能找到您，但请看一下。这里的两个关键是系列点之间的间距，在plotOptions部分中处理，以及在要分组的xAxis上定义类别。Fiddle

$(function() {

var data =
[
/* Apr 2013 */
{name:"T1",x:1364774400000, y:13918927, color:"red"},
{name:"T1",x:1364774400000, y:10920462, color:"green"},
[1364860800000,18920462],
[1364947200000,12971961],
/* May 2013 */
[1367366400000,18112671],
[1367452800000,15072312]
];
    /*$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-      v.json&callback=?', function(data) {*/

    // create the chart
    $('#container').highcharts('StockChart', {
        chart: {
            alignTicks: false,
            type: 'column'
        },

        plotOptions: {
        series: {
            pointPadding: 0,
            groupPadding: 0,
            borderWidth: 0, 
            shadow: false
            }
        },
        rangeSelector: {
            selected: 1
        },

        title: {
            text: 'AAPL Stock Volume'
        },

        series: [{
            name: 'AAPL Stock Volume',
            data: data
        }],
        xAxis: {
            categories: ['Apr 2013', 'May 2013'] ///needs to be specific to your data, this is just an idea not knowing your data
        },
    });
//});
});

编辑：看到你的数据排在最前面，需要一些调整，但我希望你明白这个想法

Highcharts与时间序列的分组列

2 个答案: