如何让HighCharts JS曲线更平滑？已尝试spline配置无效

DevOps 小满

2026-7-9

HighCharts 实现平滑曲线的解决方案

你遇到的spline设置无效问题，大概率是系列类型被局部配置覆盖，或者没调整平滑度参数。以下是具体解决步骤：

核心配置要点

确保系列类型为spline
如果你的series数组中单独给目标系列设置了type: 'line'，全局plotOptions.series.type的配置会被覆盖。必须明确指定系列类型为spline：
```
series: [{
  type: 'spline', // 这里不能是line
  data: [你的数据]
}]
```

调整平滑度参数
HighCharts的spline默认平滑度为0.5，要达到你示例图的极致平滑效果，需要将smoothing设为1：

plotOptions: {
  spline: {
    smoothing: 1, // 取值范围0-1，1为最平滑
    lineWidth: 2 // 可选，调整线条粗细匹配示例图
  }
}

隐藏数据点标记（可选）
若想让线条更连贯，可隐藏数据点标记，和示例图风格统一：
```
plotOptions: {
  spline: {
    marker: {
      enabled: false
    }
  }
}
```

完整示例代码

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

<script>
Highcharts.chart('container', {
  title: { text: '平滑曲线效果' },
  xAxis: { categories: ['1月', '2月', '3月', '4月', '5月', '6月'] },
  plotOptions: {
    spline: {
      smoothing: 1,
      lineWidth: 2,
      marker: { enabled: false }
    }
  },
  series: [{
    type: 'spline',
    name: '数据系列',
    data: [8, 14, 10, 18, 15, 22]
  }]
});
</script>