HighCharts - hai trục Y, một với giá trị lớn nhất

Question

Tôi gặp sự cố với Highcharts, tôi đã đặt trục Y thành min: 0 và max: 100 (là%) nhưng không hoạt động và tạo 125 phần trăm . Có gì sai?

http://jsfiddle.net/SdTcU/

$(function() { 
     $('#container').highcharts({ 
      chart: { 
       type: 'area' 
      }, 
      title: { 
       text: '' 
      }, 
      colors: ['#c42525','#8bbc21'], 
      xAxis: { 
       categories: [ 
          '07:00:00','07:15:00','07:30:00','07:45:00','08:00:00','08:15:00','08:30:00','08:45:00','09:00:00','09:15:00','09:30:00','09:45:00','10:00:00','10:15:00','10:30:00','10:45:00','11:00:00','11:15:00','11:30:00','11:45:00','12:00:00','12:15:00','12:30:00','12:45:00','13:00:00','13:15:00','13:30:00','13:45:00','14:00:00','14:15:00','14:30:00','14:45:00','15:00:00','15:15:00','15:30:00','15:45:00','16:00:00','16:15:00','16:30:00','16:45:00','17:00:00','17:15:00','17:30:00','17:45:00','18:00:00','18:15:00','18:30:00','18:45:00','19:00:00','19:15:00','19:30:00','19:45:00','20:00:00','20:15:00','20:30:00','20:45:00','21:00:00','21:15:00','21:30:00','21:45:00','22:00:00','22:15:00','22:30:00','22:45:00','23:00:00','23:15:00' 
          ], 
       labels: { 
        step: 4, 
        rotation: -45, 
        align: 'right', 
        style: { 
         fontSize: '10px', 
         fontFamily: 'Verdana, sans-serif' 
        } 
       } 
      }, 
      yAxis: [{ // Primary yAxis 
       labels: { 
        format: '{value}', 
        style: { 
         color: '#89A54E' 
        } 
       }, 
       title: { 
        text: '1', 
        style: { 
         color: '#89A54E' 
        } 
       } 
      }, { // Secondary yAxis 
       min: 0, 
       max: 100, 
       title: { 
        text: '%', 
        style: { 
         color: '#4572A7' 
        } 
       }, 
       labels: { 
        format: '{value}%', 
        style: { 
         color: '#4572A7' 
        } 
       }, 
       opposite: true 
      }], 
      credits: { 
       enabled: false 
      }, 
      tooltip: { 
       pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}' 
      }, 
      plotOptions: { 
       area: { 
        marker: { 
         enabled: false, 
         symbol: 'circle', 
         radius: 2, 
         states: { 
          hover: { 
           enabled: true 
          } 
         } 
        } 
       } 
      }, 
      series: [{ 
       name: '1', 
       data: [ 
        null, null, 43000, 41000, 39000, 37000, 
        35000, 33000, 31000, 29000, 27000, 25000, 
        35000, 33000, 31000, 29000, 27000, 25000, 
        24000, 23000, 22000, 21000, 20000, 
        null, null, 43000, 41000, 39000, 37000, 
        24000, 23000, 22000, 21000, 20000, 
        24000, 23000, 22000, 21000, 20000 
        ] 
      }, { 
       name: '2', 
       data: [ 
        1, null, null, null, null, 1005, 1436, 2063, 3057, 4618,27387, 29459, 31056, 31982, 32040, 26956, 27912, 28999, 28965, 27826, 
        100, 1005, 1436, 2063, 3057, 4618,27387, 29459, 31056, 31982, 32040, 26956, 27912, 28999, 28965, 27826, 
        1000, 1005, 1436, 2063, 3057, 4618,27387, 29459, 31056, 31982, 32040, 26956, 27912, 28999, 28965, 27826 
        ] 
      }, 
      { 
       name: '%', 
       color: '#4572A7', 
       type: 'spline', 
       yAxis: 1, 
       data: [80,70,78,86,64,51,58,88,88,100,100,95,68,91,92,93,94,85,100] 
      } 
      ] 
     }); 
    }); 

Answer 1

Tôi hình dung nó ra . Cách tốt hơn để khắc phục vấn đề này là sử dụng đánh dấu.

Đây là mẫu http://jsfiddle.net/SdTcU/1/

$(function() { 
     $('#container').highcharts({ 
      chart: { 
       type: 'area' 
      }, 
      title: { 
       text: '' 
      }, 
      colors: ['#c42525','#8bbc21'], 
      xAxis: { 
       categories: [ 
          '07:00:00','07:15:00','07:30:00','07:45:00','08:00:00','08:15:00','08:30:00','08:45:00','09:00:00','09:15:00','09:30:00','09:45:00','10:00:00','10:15:00','10:30:00','10:45:00','11:00:00','11:15:00','11:30:00','11:45:00','12:00:00','12:15:00','12:30:00','12:45:00','13:00:00','13:15:00','13:30:00','13:45:00','14:00:00','14:15:00','14:30:00','14:45:00','15:00:00','15:15:00','15:30:00','15:45:00','16:00:00','16:15:00','16:30:00','16:45:00','17:00:00','17:15:00','17:30:00','17:45:00','18:00:00','18:15:00','18:30:00','18:45:00','19:00:00','19:15:00','19:30:00','19:45:00','20:00:00','20:15:00','20:30:00','20:45:00','21:00:00','21:15:00','21:30:00','21:45:00','22:00:00','22:15:00','22:30:00','22:45:00','23:00:00','23:15:00' 
          ], 
       labels: { 
        step: 4, 
        rotation: -45, 
        align: 'right', 
        style: { 
         fontSize: '10px', 
         fontFamily: 'Verdana, sans-serif' 
        } 
       } 
      }, 
      yAxis: [{ // Primary yAxis 
       gridLineWidth: 1, 
       tickInterval:10750, //get max value from highest area and divide it by 4 
       labels: { 
        format: '{value}', 
        style: { 
         color: '#89A54E' 
        } 
       }, 
       title: { 
        text: '1', 
        style: { 
         color: '#89A54E' 
        } 
       } 
      }, { // Secondary yAxis 
       tickInterval:20, //set ticks to 20 
       min: 0, 
       max: 100, 
       title: { 
        text: '%', 
        style: { 
         color: '#4572A7' 
        } 
       }, 
       labels: { 
        format: '{value}%', 
        style: { 
         color: '#4572A7' 
        } 
       }, 
       opposite: true 
      }], 
      credits: { 
       enabled: false 
      }, 
      tooltip: { 
       pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}' 
      }, 
      plotOptions: { 
       area: { 
        marker: { 
         enabled: false, 
         symbol: 'circle', 
         radius: 2, 
         states: { 
          hover: { 
           enabled: true 
          } 
         } 
        } 
       } 
      }, 
      series: [{ 
       name: '1', 
       data: [ 
        null, null, 43000, 41000, 39000, 37000, 
        35000, 33000, 31000, 29000, 27000, 25000, 
        35000, 33000, 31000, 29000, 27000, 25000, 
        24000, 23000, 22000, 21000, 20000, 
        null, null, 43000, 41000, 39000, 37000, 
        24000, 23000, 22000, 21000, 20000, 
        24000, 23000, 22000, 21000, 20000 
        ] 
      }, { 
       name: '2', 
       data: [ 
        1, null, null, null, null, 1005, 1436, 2063, 3057, 4618,27387, 29459, 31056, 31982, 32040, 26956, 27912, 28999, 28965, 27826, 
        100, 1005, 1436, 2063, 3057, 4618,27387, 29459, 31056, 31982, 32040, 26956, 27912, 28999, 28965, 27826, 
        1000, 1005, 1436, 2063, 3057, 4618,27387, 29459, 31056, 31982, 32040, 26956, 27912, 28999, 28965, 27826 
        ] 
      }, 
      { 
       name: '%', 
       color: '#4572A7', 
       type: 'spline', 
       yAxis: 1, 
       data: [80,70,78,86,64,51,58,88,88,100,100,95,68,91,92,93,94,85,100] 
      } 
      ] 
     }); 
    }); 

Answer 2

Vấn đề bạn đang gặp phải là highcharts đang cố gắng sắp xếp các bọ ve. Có hai cách xử lý vấn đề này với các bộ dữ liệu hiện tại:

max: 100 

thay đổi

max: 75 

hay, bạn cần phải thiết lập alignTicks như sai

chart: { 
    type: 'area', 
    alignTicks: false 
} 

Answer 3

Bạn cũng có thể sử dụng một sự kết hợp của các giải pháp trên (làm việc cho tôi):

alignTicks: false (chart) 
max:100 (on % axis) 
gridLineWidth: 0 (on second Y axis)