2014-07-03 26 views
0

您可以請看看this demo並讓我知道爲什麼我無法設置另一面yAxis?關於在Highcharts.js中設置兩個yAxis的問題

$(function() { 
      $('#chart2').highcharts({ 
     chart: { 
      type: 'column' 
     }, 
     credits: { 
      enabled: false 
     }, 
      title: { 
      text: 'The Chart Title Goes Here!', 
       style: { 
       color: '#5882FA', 
       fontWeight: 'normal', 
       fontSize: '11', 
       marginBottom: '30' 
      } 
     }, 

     xAxis: { 
      categories: ['Roads', 'Powerlines'], 

     }, 
        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 
      }], 
     legend: { 
     enabled: false 
    }, 
     tooltip: { 
      formatter: function() { 
       return this.x + 
        ' is <b>'+ this.y +'</b>'; 
      } 
     }, 

     series: [{ 
      data: [{ 
       name: 'Roads', 

       y: 200 
      }, { 
       name: 'Powerlines', 
       color: '#FF00FF', 
       y: 50 
      }] 
     }] 
    }); 
}); 

我找到了Highcharts API一些樣品,我試圖按照他們對我的demo,但是他們沒有工作!

Highcharts : bar chart with multiple y axes

回答

1

我已經改正的問題您的代碼:DEMO

您必須分別爲每個y軸傳遞系列數據:

series: [{ 
      name: 'Rainfall', 
      type: 'column', 
      yAxis: 1, 
      data: [49.9, 71.5], 
      tooltip: { 
       valueSuffix: ' mm' 
      } 

     }, { 
      name: 'Temperature', 
      type: 'column', 
      data: [7.0, 6.9], 
      tooltip: { 
       valueSuffix: ' °C' 
      } 
     }] 
1

好吧,我想你需要修復您的series對象。如何this

series : [{ 
     data : [{ 
       name : 'Roads', 

       y : 200 
      }, { 
       name : 'Powerlines', 
       color : '#FF00FF', 
       y : 50 
      } 
     ] 
    }, 
    { 
     yAxis : 1, 
     data : [{ 
       name : 'Roads', 

       y : 30 
      }, { 
       name : 'Powerlines', 
       color : '#FF00FF', 
       y : 10 
      } 
     ] 
    } 
] 

你也需要添加yAxis : 1作爲id以軸(你可以明確地設置一個軸的id確保)