折线图平滑处理技术问询：优化120个数据点的锯齿状折线

针对你120个高波动数据点的折线图平滑需求，以下是三个你试过的图表库的具体实现方法，直接配置就能得到趋势清晰的平滑曲线：

Highcharts #

不需要额外依赖D3，用内置配置就能搞定：

• 核心参数是smoothing（取值0-1，数值越大曲线越平滑），配合隐藏数据点更聚焦趋势
• 示例代码：

Highcharts.chart('container', {
  series: [{
    data: [/* 你的120个数据点数组 */],
    type: 'line',
    smoothing: 0.8, // 控制平滑程度
    marker: { enabled: false } // 隐藏单个数据点
  }]
});

• 要是想要更接近D3 curvebasis的效果，也可以用curveType: 'smooth'，不过smoothing参数的可控性更强。

Apache ECharts #

两种方式实现平滑，按需选择：

1. 内置平滑配置

option = {
  xAxis: { type: 'category', data: [/* 横轴对应数据 */] },
  yAxis: { type: 'value' },
  series: [{
    data: [/* 你的120个数据点数组 */],
    type: 'line',
    smooth: 0.6, // 设true用默认平滑度，也可以传0-1的数值自定义
    symbol: 'none' // 隐藏数据点
  }]
};

2. 用D3 curvebasis预处理数据
   如果需要和AmCharts里的curvebasis效果完全一致，可以先处理数据再传入ECharts：

// 假设你的数据是[{x: 0, y: 10}, ...]格式
const processed = d3.line().curve(d3.curveBasis)(yourData.map(d => [d.x, d.y]));
// 把processed转换成ECharts需要的坐标数组后传入series.data

AmCharts #

两种平滑方案，包括你提到的D3 curvebasis集成：

1. 内置平滑

const chart = am4core.create('container', am4charts.XYChart);
// 配置x、y轴...
const series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = 'value';
series.dataFields.dateX = 'date';
series.smoothing = "monotoneX"; // 可选值：none/simple/monotoneX，monotoneX能保留趋势的同时平滑
series.hideBullets = true; // 隐藏数据点

2. 集成D3 curvebasis

// 先引入D3库
import * as d3 from "d3";

const series = chart.series.push(new am4charts.LineSeries());
// 配置数据字段...
// 替换默认曲线生成器为curvebasis
series.curveFactory = () => d3.curveBasis;
series.tensionX = 0.8; // 可选：微调平滑张力

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