与多个yAxis的堆积条形图

Question

我想在堆积的条形图上添加第二个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] 
     }] 
    }); 
}); 

以我上面的例子中，我想只有两个堆叠bars-一个表示降雨和另一个显示温度和应关联到不同的y轴这些堆积条形图。温度应该遵循主要y轴（标记为℃），降雨应该关注次要y轴（标记为mm）。

每个堆栈将显示对应各月的降雨/温度的值。

有人可以告诉我如何分配yAxis的降雨量和温度。 因为我有系列数据作为月份（1月，2月和3月）的系列数据的阵列，而我希望我的yaxis特定于提供降雨和温度类别。

Answer 1

这是可能的，但你可以指定一个系列的轴 - 所以你需要分割如下的系列：

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/