Highcharts 折线图如何实现折线贴合左右两侧边缘无留白

解决方案 #

你需要对配置做3处调整即可实现折线贴边效果：

1. 原配置中plotOptions仅配置了柱状图column的间距属性，对你使用的折线图line不生效，需要补充对应配置
2. 给X轴新增startOnTick: true和endOnTick: true属性，强制坐标轴首尾对齐刻度
3. 显式指定X轴的min、max值为你数据的首尾索引，彻底消除留白

修改后的完整配置如下：

{
  chart: {  
    margin: 0,  
    spacing: [0,0,0,0]
  },
  title: { text: '' },
  xAxis: {  
    labels: { enabled: false },  
    minPadding: 0,  
    maxPadding: 0,
    startOnTick: true,
    endOnTick: true,
    min: 0,
    max: 7 // 对应你的8个数据，索引从0到7
  },
  yAxis: {  
    title: { text: '' },  
    minPadding: 0,  
    maxPadding: 0,  
    labels: { enabled: false },  
    offset: 0
  },
  plotOptions: {
    line: {
      pointPadding: 0,
      groupPadding: 0
    }
  },
  series: [{  
    data: [12, 8, 43, 35, 20, 90, 100, 110],  
    type: 'line',  
    showInLegend: false,  
    marker: { enabled: false }
  }],
  tooltip: { enabled: false },
  credits: { enabled: false }
}

如果后续你更换了数据长度，只需要同步修改xAxis的max值为数据长度-1即可。

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