2013-07-11 4 views
3

저는 여러 축을 사용하고 있습니다. 최대 축을 사용하도록 하나의 축을 설정했습니다. 그것이 보여준 유일한 축이라면 max는 정상적으로 작동합니다. 그러나 다른 축이 표시되면 첫 번째 축 max가 더 큰 값으로 변경 될 수 있습니다. 최대치를 표시하려면 어떻게해야합니까?여러 축을 가진 하이 차트 축 최대 값

이것을 보려면 http://jsfiddle.net/bx9sB/으로 이동하십시오. 여기에는 3 축이 있고 온도 축의 최대 값은 30입니다. 모든 축을 해제 한 다음 온도를 클릭합니다. 최대치는 30입니다. 다음을 클릭하면 압력 축이 표시됩니다. 이제 온도 축 나는 그것이 당신은 0으로 min 매개 변수를 설정해야합니다 (30)

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      zoomType: 'xy' 
     }, 
     title: { 
      text: 'Average Monthly Weather Data for Tokyo' 
     }, 
     subtitle: { 
      text: 'Source: WorldClimate.com' 
     }, 
     xAxis: [{ 
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
       'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
     }], 
     yAxis: [{ // Primary yAxis 
      labels: { 
       formatter: function() { 
        return this.value +'°C'; 
       }, 
       style: { 
        color: '#89A54E' 
       } 
      }, 
      title: { 
       text: 'Temperature', 
       style: { 
        color: '#89A54E' 
       } 
      }, 
      opposite: true,     
      max: 30 

     }, { // Secondary yAxis 
      gridLineWidth: 0, 
      title: { 
       text: 'Rainfall', 
       style: { 
        color: '#4572A7' 
       } 
      }, 
      labels: { 
       formatter: function() { 
        return this.value +' mm'; 
       }, 
       style: { 
        color: '#4572A7' 
       } 
      } 

     }, { // Tertiary yAxis 
      gridLineWidth: 0, 
      title: { 
       text: 'Sea-Level Pressure', 
       style: { 
        color: '#AA4643' 
       } 
      }, 
      labels: { 
       formatter: function() { 
        return this.value +' mb'; 
       }, 
       style: { 
        color: '#AA4643' 
       } 
      }, 
      opposite: true 
     }], 
     tooltip: { 
      shared: true 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'left', 
      x: 120, 
      verticalAlign: 'top', 
      y: 80, 
      floating: true, 
      backgroundColor: '#FFFFFF' 
     }, 
     series: [{ 
      name: 'Rainfall', 
      color: '#4572A7', 
      type: 'column', 
      yAxis: 1, 
      data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], 
      tooltip: { 
       valueSuffix: ' mm' 
      } 

     }, { 
      name: 'Sea-Level Pressure', 
      type: 'spline', 
      color: '#AA4643', 
      yAxis: 2, 
      data: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7], 
      marker: { 
       enabled: false 
      }, 
      dashStyle: 'shortdot', 
      tooltip: { 
       valueSuffix: ' mb' 
      } 

     }, { 
      name: 'Temperature', 
      color: '#89A54E', 
      type: 'spline', 
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6], 
      tooltip: { 
       valueSuffix: ' °C' 
      } 
     }] 
    }); 
}); 

답변

3

설정 alignTicks : 거짓

예 :

http://jsfiddle.net/jlbriggs/bx9sB/4/

alignTicks:false 
+0

고마워요.이 질문에 jsfiddle뿐만 아니라,이 jsfiddle http://jsfiddle.net/bx9sB/3/ 분, 세 번째 축에 최대, 함께 작동합니다. – user2573014

+0

그리드 선이 어지럽게 보이는 경우 gridLineWidth를 0으로 설정하여 보조 축을 숨기는 것이 좋습니다. 위의 질문에서 사용했습니다. –

0

에 머물 얻을 수있는 방법 (30) 대신에, 35까지 간 다음, 모두가 제대로 작동합니다.

http://jsfiddle.net/bx9sB/1/

+0

덕분에,이 음,이 3 작동하지 않는 것 같습니다 :-) – user2573014

+0

작동 중심선. http://jsfiddle.net/bx9sB/2/에서 Pressure 축에 대해 min : 1005, max : 1025를 설정했지만 모든 축이 표시되면 최대 값은 1030입니다. – user2573014

관련 문제