javascript - 如何在包含堆积面积图的 highstock (highcharts) 上制作多 Pane ？

Question

我想知道是否可以将两个 Pane View (如 this example)与堆积面积图一起使用？

我试图让它在 fiddle 中工作 http://jsfiddle.net/g2xDj/2/ , 但是，堆积面积图不显示。

     var stacked_data =  [{
                    name: 'Asia',
                    data: [[1364292000,502], [1364294000,635], [1364296000,809], [1364298000,947], [1364300000,1402], [1364302000,3634], [1364304000,5268]]
                }, {
                    name: 'Africa',
                    data: [[1364292000,106], [1364294000,107], [1364296000,111], [1364298000,133], [1364300000,221], [1364302000,767], [1364304000,1766]]
                }, {
                    name: 'Europe',
                    data: [[1364292000,163], [1364294000,203], [1364296000,276], [1364298000,408], [1364300000,547], [1364302000,729], [1364304000,628]]
                }];

               var line_data = [[1364292000,502], [1364294000,635], [1364296000,809], [1364298000,947], [1364300000,1402], [1364302000,3634], [1364304000,5268]];

            // create the chart
            $('#container').highcharts('StockChart',

   {
                chart : {
                    //type: 'area',
                    renderTo : 'container',
                    zoomType: 'x'
                }, 
                plotOptions: {
                     area: {
                         stacking: 'normal'
                     }
                 },
                rangeSelector: {
                    selected: 1
                },

                title: {
                    text: 'AAPL Historical'
                },

                yAxis: [{
                    title: {
                        text: 'Load'
                    },
                    height: 200,
                    lineWidth: 2
                },
                {
                   title: {
                        text: 'Load 2'
                   },
                   top: 300,
                   height: 100,
                   offset: 0,
                   lineWidth: 2    
                }
                ],
                series: [
                    { 
                      name: "area",
                      data: stacked_data,
                      yAxis: 0
                    },{
                      name: "line",
                      data: line_data,
                      yAxis: 1
                    }]
            });
        });

有人有什么想法可以帮助我吗？

Answer 1

在您的示例中，您的系列结构不正确，因为在 stackedArea 中，您尝试为数据推送“系列”结构。

此外，您应该将所有时间戳乘以 1000 以获得 JS 时间戳格式。

更新示例:http://jsfiddle.net/g2xDj/4/

  var series = [{
        name: 'Asia',
        data: [
            [1364292000000, 502],
            [1364294000000, 635],
            [1364296000000, 809],
            [1364298000000, 947],
            [1364300000000, 1402],
            [1364302000000, 3634],
            [1364304000000, 5268]
        ]
    }, {
        name: 'Africa',
        data: [
            [1364292000000, 106],
            [1364294000000, 107],
            [1364296000000, 111],
            [1364298000000, 133],
            [1364300000000, 221],
            [1364302000000, 767],
            [1364304000000, 1766]
        ]
    }, {
        name: 'Europe',
        data: [
            [1364292000000, 163],
            [1364294000000, 203],
            [1364296000000, 276],
            [1364298000000, 408],
            [1364300000000, 547],
            [1364302000000, 729],
            [1364304000000, 628]
        ]
    }];

    var line_data = {
        type:'line',
        yAxis:1,
        data:[
        [1364292000000, 502],
        [1364294000000, 635],
        [1364296000000, 809],
        [1364298000000, 947],
        [1364300000000, 1402],
        [1364302000000, 3634],
        [1364304000000, 5268]
                     ]};

series.push(line_data);