如何让Highcharts Xrange系列数据填满图表宽度？

要让Xrange系列的条目填满整个图表高度（因inverted: true，对应垂直方向空间），可以通过调整Y轴内边距、系列间距以及图表边距来实现，具体修改如下：

• 调整Y轴内边距：给yAxis添加minPadding: 0和maxPadding: 0，让唯一的分类占满Y轴空间
• 清除系列间距：在xrange系列配置里添加groupPadding: 0和pointPadding: 0，消除条目间的空隙
• 移除图表边距：给chart配置添加margin: [0, 0, 0, 0]，去掉图表四周的留白

修改后的完整配置代码：

{
    chart: {
      inverted: true,
      height: '500px',
      backgroundColor: '',
      plotBackgroundColor: '',
      style: {
        fontFamily: 'Open Sans'
      },
      margin: [0, 0, 0, 0] // 移除图表边距
    },
    xAxis: {
      max: 24,
      min: 0,
      endOnTick: true,
      lineWidth: 1,
      gridLineWidth: 0,
      lineColor: 'transparent',
      gridLineColor: 'transparent',
      tickLength: 0,
      title: {
        text: ''
      },
      startOnTick: true,
      labels: {
        style: {
          color: '#ffffff',
          fontWeight: '600'
        },
      },
      tickInterval: 1
    },
    yAxis: {
      title: {
        text: ''
      },
      labels: {
        enabled: false
      },
      gridLineWidth: 0,
      categories: [''],
      minPadding: 0, // Y轴顶部内边距设为0
      maxPadding: 0  // Y轴底部内边距设为0
    },
    series: [
      {
        type: 'xrange',
        borderColor: 'gray',
        borderRadius: 0,
        states: {
          inactive: {
            opacity: 1
          }
        },
        groupPadding: 0, // 系列组间距设为0
        pointPadding: 0, // 点间距设为0
        data: scheduleData,
        dataLabels: {
          enabled: true,
          formatter: function() {
            let style = `color: ${this.point.name === 'charging' ? 'black' : 'white'}; font-weight: bold;`
            return `<span style="${style}">${this.point.name}</span>`
          }
        }
      }
    ]
  }

额外优化：将dataLabels里的转义字符</"替换为普通HTML标签和引号，让代码更易读，Highcharts支持直接返回格式化后的HTML字符串。

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