HighCharts - 两个Y轴，一个具有最大值

3 回答

• 1

  你遇到的问题是highcharts正试图调整滴答声 . 使用当前数据集有两种方法可以解决此问题：

  max: 100
  

  改变为

  max: 75
  

  或者，您需要将alignTicks设置为false

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

  回复于 2024-05-01T19:38:16+08:00
• 4

  您也可以使用上述解决方案的组合（为我工作）：

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

  回复于 2024-05-01T19:38:16+08:00
• 23

  我明白了 . 解决此问题的更好方法是使用tickinterval .

  这是样本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>
  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]
              }
              ]
          });
      });
  

  回复于 2024-05-01T19:38:16+08:00