HighCharts如何在多軸圖表中使用yAxis中的不同plotOptions

我需要繪製帶有兩個yAxis的圖表，並且還需要堆疊列。當我有單軸時，我可以非常好地疊加第三列值。問題是當我添加第二個yAxis（多軸）時，新的三個值疊加在舊的yAxis上。這導致單個堆積列中的6個值。我不想要這個。我希望我可以設置一個不同的plotOptions以根據新的yAxis堆疊列。這裏是我試過HighCharts如何在多軸圖表中使用yAxis中的不同plotOptions

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      zoomType: 'xy' 
     }, 
     title: { 
      text: 'Average Monthly Enveloppe and Effectif in Kinshasa' 
     }, 
     subtitle: { 
      text: 'Source: sygecpaf' 
     }, 
     xAxis: [{ 
      categories: ['Ja', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
       'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
     }], 
     yAxis: [{ // Primary yAxis 
      labels: { 
       format: '{value}Fc', 
       style: { 
        color: '#89A54E' 
       } 
      }, 
      title: { 
       text: 'Enveloppe', 
       style: { 
        color: '#89A54E' 
       } 
      } 
     }, { // Secondary yAxis 
      title: { 
       text: 'Effectifsl', 
       style: { 
        color: '#4572A7' 
       } 
      }, 
      labels: { 
       format: '{value}', 
       style: { 
        color: '#4572A7' 
       } 
      }, 
      opposite: true 
     }], 
     tooltip: { 
      shared: true 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'left', 
      x: 120, 
      verticalAlign: 'top', 
      y: 100, 
      floating: true, 
      backgroundColor: '#FFFFFF' 
     }, 
     plotOptions: { 
      column: { 
       stacking: 'normal' 
      } 
     }, 
     series: [{ 
      name: 'Total', 
      color: '#2415cf', 
      type: 'column', 
      yAxis: 1, 
      data: [499, 715, 1064, 499, 715, 1292, 1440, 1760, 1356, 1485, 2164], 
      tooltip: { 
       valueSuffix: ' mm' 
      } 

     }, { 
      name: 'Payés', 
      color: '#4572A7', 
      type: 'column', 
      yAxis: 1, 
      data: [1064, 1941, 956, 544, 1292, 1440, 1760, 1356, 1485, 2164, 1941, 956, 544], 
      tooltip: { 
       valueSuffix: ' mm' 
      } 

     }, { 
      name: 'Non payés', 
      color: '#c572A7', 
      type: 'column', 
      yAxis: 1, 
      data:[1064, 1941, 956, 544, 1292, 1440, 1760, 1356, 1485, 2164, 1941, 956, 544], 
      tooltip: { 
       valueSuffix: '' 
      } 

     }, { 
      name: 'Total', 
      color: '#89A54E', 
      type: 'column', 
      data: [70, 69, 95, 145, 182, 215, 252, 265, 233, 183, 139, 96], 
      tooltip: { 
       valueSuffix: ' Fc' 
      } 
     }, { 
      name: 'Payés', 
      color: '#89A5fE', 
      type: 'column', 
      data: [70, 69, 95, 145, 182, 215, 252, 265, 233, 183, 139, 96], 
      tooltip: { 
       valueSuffix: '°C' 
      } 
     }, { 
      name: 'Non Payés', 
      color: '#72c5A7', 
      type: 'column', 
      data: [70, 69, 95, 145, 182, 215, 252, 265, 233, 183, 139, 96], 
      tooltip: { 
       valueSuffix: '°C' 
      } 
     }] 
    }); 
});

誰能edit this fiddle幫我想做什麼？

謝謝

來源

2014-03-29 Bellash

我終於解決了這個問題。事實上，我不得不每個系列

....,{ 
      name: 'leg1', 
      stack: 'effstack', 
      yAxis: 1, 
      data:[...], 

     },{ 
      name: 'leg2', 
      stack: 'effstack', 
      yAxis: 1, 
      data:[...], 

     },{ 
      name: 'leg3', 
      stack: 'otherstack', 
      yAxis: 0, 
      data:[...], 

     },{ 
      name: 'leg4', 
      stack: 'otherstack', 
      yAxis: 0, 
      data:[...], 

     },...

這裏中定義的堆棧屬性是新jsfiddle

來源

2014-03-29 13:30:16 Bellash

HighCharts如何在多軸圖表中使用yAxis中的不同plotOptions

回答

相關問題