高圖高度降低時Y軸超過最大值

Question

yAxis 值 min 和 max 被我設置為 0 和 100，刻度間隔為 20。

但是當分辨率更改為較低的分辨率或放大圖表時，

我觀察到高音的高度降低了，最大值設置為 120，滴答間隔設置為 40，這不是所需的行為，請您幫我解決如何避免它？

我如何確保最大值為 100，所有圖表高度的刻度間隔為 20，並且分辨率也較低。

提前致謝

注意：- 我相信高度會降低，因為 xAxis 標簽會隨着寬度的減小（以較低的分辨率）對角旋轉，並且在 HTML div 中占用更多空間並導致圖表的高度降低。

具有預期行為的 YAxis

Y軸分辨率降低，高度降低

https://jsfiddle.net/BlackLabel/drgkt598/

Highcharts.chart('container', {

  chart: {
    type: "column",
    height: 205,
    plotBackgroundColor: "#D3D3D3",
    width: 250,
  },
  title: {
    text: ''
  },
  credits: {
    enabled: false
  },
  plotOptions: {
    series: {
      dataLabels: {
        enabled: false
      },
      pointPadding: 0
    }
  },
  xAxis: {
    lineWidth: 2,
    type: 'category',
    lineColor: '#000',
    tickLength: 0
  },

  yAxis: [{
    title: {
      text: ''
    },
    min: 0,
    max: 100,
    tickInterval: 10,
    gridLineWidth: 0,
    plotLines: [{
      value: 70,
      color: 'black',
      dashStyle: "Solid",
      width: 4,
      zIndex: 5,
      label: {
        text: 39,
        align: "right",
        x: 2,
        y: -5,
        style: {
          color: 'black',
          fontWeight: "bold",
          fontSize: "18px",
        }
      }
    }],
  }, {
    linkedTo: 0,
    width: 60,
    labels: {
      enabled: false
    },
    plotBands: [{
        color: 'rgb(204,0,0)',
        from: 0,
        to: 30.99,
        zIndex: 1,
      },
      {
        color: 'rgb(226,113,113)',
        from: 31,
        to: 44.99,
        zIndex: 3,
      },
      {
        color: 'rgb(247,209,34)',
        from: 45,
        to: 54.99,
        zIndex: 3,
      },
      {
        color: 'rgb(136,207,136)',
        from: 55,
        to: 68.99,
        zIndex: 3,
      },
      {
        color: 'rgb(68,180,68)',
        from: 69,
        to: 87.99,
        zIndex: 3,
      },
      {
        color: 'rgb(0,153,0)',
        from: 88,
        to: 100,
        zIndex: 3,
      }
    ]
  }],
  series: [{
    dataLabels: {
      color: "white",
      verticalAlign: "bottom",
      crop: false,
      style: {
        fontWeight: "Normal"
      }
    },
    data: [{
      y: 85,
      name: 'A',
      color: 'red',
      dataLabels: {
        formatter() {
          return '<span style="font-size:11px;">A</span>';
        },
        y: -20
      }
    }, {
      y: 72,
      name: 'B',
      color: 'green',
      dataLabels: {
        formatter() {
          return '<span style="font-size:11px;">B</span>';
        },
        y: -15
      }
    }, {
      y: 83,
      name: 'C',
      color: 'blue',
      dataLabels: {
        formatter() {
          return '<span style="font-size:11px;">C</span>';
        },
        y: -15
      }
    }],
    showInLegend: false
  }]

});

Answer 1

就像您注意到的那樣 - 沒有足夠的空間為一些較小的維度呈現 5 個標簽，因此實現的邏輯嘗試計算其他時間戳，這將適合，例如[0, 40, 80, 120] 。

我認為您可以通過使用響應選項來控制它，並將tickInterval設置為另一個值，例如 50。

演示： https://jsfiddle.net/BlackLabel/zupbe174/

  responsive: {
    rules: [{
      condition: {
        maxHeight: 120
      },
      chartOptions: {
        yAxis: [{
          tickInterval: 50
        }, {

        }]
      }
    }]
  }

API： https://api.highcharts.com/highcharts/responsive.rules.condition