已设置Min/Max为何Y轴范围不符？Highcharts技术咨询

问题描述 #

配置Highcharts图表时，已为Y轴设置min:1067、max:1098，但实际显示的轴范围与设置值不一致，配置未正常生效。

相关Y轴配置代码：

yAxis: [
  {
    min: 1067,
    max: 1098,
    ...   
  } 
]

问题截图：

完整图表配置代码：

Highcharts.chart('container', {
  accessibility: {
    enabled: false,
  },
  credits: {
    enabled: false,
  },
  title: {
    text: 'fruits',
    margin: 50,
  },
  boost: {
    useGPUTranslations: false,
    seriesThreshold: 1,
    enabled: true,
  },
  chart: {
    spacingRight: 15,
    spacingLeft: 5,
    marginTop: 60,
    width: 200,
    zooming: {
      mouseWheel: {
        enabled: true,
      },
      type: 'y',
    },
    marginBottom: 100,
    events: {},
  },
  legend: {
    width: 200,
    maxHeight: 100,
    x: 15,
  },
  xAxis: [
    {
      minorTicks: true,
      crosshair: {
        snap: false,
      },
      maxPadding: 0,
      minPadding: 0,
      title: {
        offset: 7,
      },
      labels: {
        y: -7,
      },
      tickLength: 0,
      endOnTick: true,
      lineWidth: 0,
      startOnTick: true,
      tickAmount: 2,
      minorTickInterval: 'auto',
      tickPositions: [50, 250],
      min: 50,
      max: 250,
      reversed: false,
      opposite: true,
      gridLineWidth: 0,
      minRange: 0.1,
      type: 'linear',
    },
  ],
  yAxis: [
    {
      min: 1067,
      max: 1098,
      minorTicks: true,
      reversed: true,
      crosshair: {
        snap: false,
      },
      title: {
        text: null,
      },
      maxPadding: 0,
      minPadding: 0,
      events: {},
      labels: {
        padding: 0,
        format: '{value}',
      },
      plotLines: [],
      plotBands: [],
    },
  ],
  annotations: [],
  exporting: {
    enabled: false,
  },
  plotOptions: {
    series: {
      cursor: 'pointer',
      connectNulls: false,
      findNearestPointBy: 'xy',
      pointStart: null,
      allowPointSelect: true,
      stickyTracking: false,
      turboThreshold: 0,
      events: {},
      point: {
        events: {},
      },
    },
  },
  series: [
    {
      id: 'apples',
      cropThreshold: 999999999,
      data: [
        [139.1992, 1067.62296],
        [149.4853, 1067.65344],
        [144.3969, 1067.68392],
        [138.2329, 1067.7144],
        [121.983, 1067.74488],
        [103.8366, 1067.77536],
        [105.2784, 1067.80584],
        [95.061, 1067.83632],
        [106.0885, 1067.8668],
        [104.0712, 1067.89728],
        [106.0713, 1067.92776],
        [116.4304, 1067.95824],
        [110.8304, 1067.98872],
        [99.0074, 1068.0192],
        [111.7734, 1068.04968],
        [109.874, 1068.08016],
        [110.7685, 1068.11064],
        [111.6153, 1068.14112],
        [105.0687, 1068.1716],
        [101.1471, 1068.20208],
        [109.4528, 1068.23256],
        [120.6416, 1068.26304],
        [119.7685, 1068.29352],
        [112.6646, 1068.324],
        [111.8404, 1068.35448],
        [107.5241, 1068.38496],
        [115.9168, 1068.41544],
        [118.0581, 1068.44592],
        [114.0608, 1068.4764],
        [111.7397, 1068.50688],
        [110.735, 1068.53736],
        [120.8784, 1068.56784],
        [128.8447, 1068.59832],
        [135.3007, 1068.6288],
        [129.2467, 1068.65928],
        [119.9994, 1068.68976],
        [127.9605, 1068.72024],
        [149.9448, 1068.75072],
        [147.4349, 1068.7812],
        [150.0492, 1068.81168],
        [146.5452, 1068.84216],
        [145.3399, 1068.87264],
        [151.3617, 1068.90312],
        [158.1166, 1068.9336],
        [165.0842, 1068.96408],
        [158.9524, 1068.99456],
        [157.0213, 1069.02504],
        [161.4208, 1069.05552],
        [173.089, 1069.086],
        [185.8609, 1069.11648],
        [184.55, 1069.14696],
        [164.181, 1069.17744],
        [159.5906, 1069.20792],
        [155.7161, 1069.2384],
        [173.8883, 1069.26888],
        [167.5887, 1069.29936],
        [180.1923, 1069.32984],
        [163.429, 1069.36032],
        [142.9955, 1069.3908],
        [130.3472, 1069.42128],
        [126.596, 1069.45176],
        [125.7497, 1069.48224],
        [119.5339, 1069.51272],
        [117.046, 1069.5432],
        [123.4014, 1069.57368],
        [122.1628, 1069.60416],
        [119.5803, 1069.63464],
        [116.558, 1069.66512],
        [113.0006, 1069.6956],
        [108.1455, 1069.72608],
        [92.0693, 1069.75656],
        [102.107, 1069.78704],
        [102.3458, 1069.81752],
        [97.5753, 1069.848],
        [107.9394, 1069.87848],
        [101.2822, 1069.90896],
        [93.9894, 1069.93944],
        [92.4794, 1069.96992],
        [172.707, 1096.8228],
        [162.8424, 1096.85328],
        [175.4084, 1096.88376],
        [181.6794, 1096.91424],
        [177.7281, 1096.94472],
        [175.0131, 1096.9752],
        [175.5109, 1097.00568],
        [168.4074, 1097.03616],
        [169.2755, 1097.06664],
        [183.2871, 1097.09712],
        [150.2722, 1097.1276],
        [130.9666, 1097.15808],
        [123.926, 1097.18856],
      ],
      name: 'apples',
      lineWidth: 0.5,
      visible: true,
      allowPointSelect: true,
      tooltip: {
        outside: true,
        headerFormat: '',
      },
    },
  ],
});

原因分析 #

问题出在Highcharts的默认配置startOnTick: true和endOnTick: true，这两个属性会强制Y轴的起始和结束位置对齐到刻度线，即使手动设置了min和max。结合Y轴设置的reversed: true（轴反转），Highcharts会自动调整轴范围以匹配刻度，导致设置的min和max未被严格执行。

解决方案 #

在Y轴配置中添加startOnTick: false和endOnTick: false，禁用刻度对齐强制规则，让Highcharts严格遵守设置的min和max值：

yAxis: [
  {
    min: 1067,
    max: 1098,
    reversed: true,
    startOnTick: false, // 禁用起始对齐刻度
    endOnTick: false,   // 禁用结束对齐刻度
    minorTicks: true,
    crosshair: {
      snap: false,
    },
    title: {
      text: null,
    },
    maxPadding: 0,
    minPadding: 0,
    events: {},
    labels: {
      padding: 0,
      format: '{value}',
    },
    plotLines: [],
    plotBands: [],
  },
]

添加这两个属性后，Y轴将严格按照1067到1098的范围显示，不会再自动调整轴边界。

内容的提问来源于stack exchange，提问作者ryan