HighCharts - iki Y ekseni, bir maksimum değer ile

Highcharts ile ilgili bir sorunum var, sağ Y eksenini min: 0 ve maks: 100 (% 'si) olarak ayarlıyorum ama işe yaramayacak ve 125 yüzde yapacak . Sorun nedir?HighCharts - iki Y ekseni, bir maksimum değer ile

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] 
      } 
      ] 
     }); 
    });

kaynak

2013-05-12 breq

olarak alignTicks ayarlamanız gerekir: Mevcut veri seti ile bu sorunu ele iki yolu vardır . Bu sorunu düzeltmenin daha iyi bir yolu tickinterval kullanmaktır. İşte

(benim için çalıştı) Ayrıca yukarıdaki çözümlerin bir arada kullanabilir örnek 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] 
      } 
      ] 
     }); 
    });

kaynak

2013-05-13 06:15:03 breq

bir tickInterval ayarlayarak veya ayarlamadan, alignTick'leri false olarak ayarlamak ve eksenlerin birindeki ızgara çizgilerini gizlemek en iyisidir. – jlbriggs

Üzgünüz, bu daha iyi bir yol değil, verileri değiştirir bitirmez, aynı sorunun daha önce olduğu gibi kırılacak. – Duniyadnd

Evet, ama ben php ile veri alıyorum, ben de daima max ve min hesapladım :) – breq

yaşadığınız sorun Highcharts kene hizalamak için çalışıyor olmasıdır.

max: 75

için

max: 100

değişiklikler ben bunu anlamaya ya, sen sahte

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

kaynak

2013-05-12 19:10:10 Duniyadnd

Bu benim için kabul edilen yanıt daha iyi çalışır. – Robusto

geçerli:

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

kaynak

2013-12-19 20:25:39 fraktal12

HighCharts - iki Y ekseni, bir maksimum değer ile

cevap

İlgili konular