如何在包含堆积区域图的高库（highcharts）上制作多窗格？

Question

我想知道是否可以使用带有堆积面积图的两窗格视图（如this example）？

我试着让它在小提琴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）;