2016-11-23 22 views
0

積み上げ棒グラフに2番目のy軸を追加しようとしています。 提供されたカテゴリに対応するy軸が必要です。複数のy軸が積み重なった棒グラフ

jsfiddle - 私の上記の例でhttp://jsfiddle.net/akshayasharma/qf3escqn/2/

$(function() { 
    Highcharts.chart('container', { 
     chart: { 
      zoomType: 'xy' 
     }, 
     title: { 
      text: 'Average temperature and rainfall of first quarter' 
     }, 
     subtitle: { 
      text: 'Source: WorldClimate.com' 
     }, 
     xAxis: [{ 
      categories: ['Rainfall', 'Temperature'], 
      crosshair: true 
     }], 
     yAxis: [{ // Primary yAxis 
      labels: { 
       format: '{value}°C', 
       style: { 
        color: Highcharts.getOptions().colors[1] 
       } 
      }, 
      title: { 
       text: 'Temperature', 
       style: { 
        color: Highcharts.getOptions().colors[1] 
       } 
      } 
     }, { // Secondary yAxis 
      title: { 
       text: 'Rainfall', 
       style: { 
        color: Highcharts.getOptions().colors[0] 
       } 
      }, 
      labels: { 
       format: '{value} mm', 
       style: { 
        color: Highcharts.getOptions().colors[0] 
       } 
      }, 
      opposite: true 
     }], 
     tooltip: { 
      shared: true 
     }, 
     legend: { 
      align: 'center', 
      verticalAlign: 'bottom', 
      backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF' 
     }, 
     plotOptions: { 
      column: { 
       stacking: 'normal' 
      } 
     }, 
     series: [{ 
      name: 'Jan', 
      type: 'column', 
      data: [49.9, 7] 
     }, { 
      name: 'Feb', 
      type: 'column', 
      data: [71.5, 6.9] 
     }, { 
      name: 'Mar', 
      type: 'column', 
      data: [106.4, 9.5] 
     }] 
    }); 
}); 

は、私は2つだけ積層bars-降雨を示す一方と別の示す温度と異なるY軸に関連する必要があり、これらの積層バーをしたいです。温度は一次y軸(度Cで表示)を、降水は二次y軸(mmで表示)を考慮する必要があります。

各スタックは、それぞれの月の降雨量/温度に対応する値を表示します。

RainfallとTemperatureのためにyAxisを割り当てる方法を教えてください。 シリーズデータを月(1月、2月、3月)の系列データの配列として持っていますが、私のyaxisは降雨と気温であるカテゴリに特有のものにします。

答えて

0

それは可能ですが、あなたは軸にシリーズを割り当てることができます - あなたは以下のようにあなたのシリーズを分割する必要があります。

series: [{ 
    name: 'Jan', 
    id: 'j', 
    data: [ 
    [0, 49.9] 
    ], 
    colorIndex: 0 
}, { 
    linkedTo: 'Jan', 
    data: [ 
    [1, 7] 
    ], 
    colorIndex: 0, 
    yAxis: 1 
}, { 
    id: 'f', 
    name: 'Feb', 
    data: [ 
    [0, 71.5] 
    ], 
    colorIndex: 1, 
}, { 
    linkedTo: 'f', 
    data: [ 
    [1, 6.9] 
    ], 
    colorIndex: 1, 
    yAxis: 1 
}, { 
    id: 'm', 
    name: 'Mar', 
    data: [ 
    [0, 106.4] 
    ], 
    colorIndex: 2 
}, { 
    linkedTo: 'm', 
    data: [ 
    [1, 9.5] 
    ], 
    colorIndex: 2, 
    yAxis: 1 
}] 

http://jsfiddle.net/qf3escqn/4/

+0

感謝morganfree。それは私を助けた。 –

+0

問題が解決したら、私の答えを受け入れてください。質問は "開かれた"ままではありません。 – morganfree

関連する問題