Highcharts spline图如何去除x轴坐标左右两侧的空白间隙

要去除Highcharts spline图表x轴两侧的空白，不需要调整spacing或margin参数，这两个参数控制的是图表整体和容器的边距，你需要修改xAxis的内边距配置即可。

核心修改点 #

在你原有的xAxis配置项中新增两个参数：

xAxis: {
  categories: [7, 13, 16, 18, 19, 20, 29, 22, 25, 38, 23, 26, 28, 29, 33],
  // 新增以下两行
  minPadding: 0,
  maxPadding: 0
}

• minPadding 控制x轴起始位置左侧的留白比例，默认值为0.01，设为0即可完全清除左侧空白
• maxPadding 控制x轴结束位置右侧的留白比例，默认值为0.01，设为0即可完全清除右侧空白

如果设置后发现折线最左侧/最右侧的点边缘被裁切，可以额外给series配置加上clip: false关闭数据点裁切。

修改后完整代码 #

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; width: 500px"></div>

Highcharts.chart('container', {
  title: {
    text: ''
  },
  chart: {
    type: 'spline',
  },
  legend: {
    enabled: false // 原配置的display为非Highcharts官方参数，修正为enabled
  },
  xAxis: {
    categories: [7, 13, 16, 18, 19, 20, 29, 22, 25, 38, 23, 26, 28, 29, 33],
    minPadding: 0,
    maxPadding: 0
  },
  yAxis: {
    tickPosition: 'inside',
    min: 0,
    title: {
      text: null
    },
    floor: 0,
    tickWidth: 1
  },
  series: [{
    name: 'John',
    data: [5, 3, 4, 7, 2],
    clip: false
  }, {
    name: 'Jane',
    data: [2, 2, 3, 2, 1],
    clip: false
  }, {
    name: 'Joe',
    data: [3, 4, 4, 2, 5],
    clip: false
  }]
});

内容的提问来源于stack exchange，提问作者Osman Thomas Muller