如何用Plotly.js绘制正弦曲线及离散点平滑曲线？

核心问题分析 #

你修改mode属性无效，是因为mode仅控制曲线/标记点的显示组合（比如只显示线、只显示点、或两者都显示），不决定线的平滑程度。要实现平滑曲线，关键是设置线的形状参数，同时调整颜色。

具体实现步骤 #

• 设置line.shape为spline：Plotly会基于离散点生成贝塞尔平滑曲线
• 指定line.color为蓝色（支持颜色名、十六进制、RGB等格式）
• 按需调整mode：仅显示曲线设为'lines'，需要保留离散点则设为'lines+markers'

完整代码示例 #

// 准备离散的类正弦曲线数据
const xData = Array.from({length: 20}, (_, i) => i * 0.3);
const yData = xData.map(x => Math.sin(x) + Math.random() * 0.1); // 模拟带噪声的类正弦点

// 配置平滑曲线的trace
const smoothTrace = {
  x: xData,
  y: yData,
  type: 'scatter',
  mode: 'lines', // 若要显示原始点，改为 'lines+markers'
  line: {
    color: '#1f77b4', // 蓝色（Plotly默认蓝色）
    shape: 'spline', // 核心：开启平滑曲线
    smoothing: 1.2, // 可选：调整平滑度，范围0-1.3，值越大曲线越平滑
    width: 2 // 可选：调整线条粗细
  }
};

// 布局配置
const layout = {
  title: '蓝色平滑类正弦曲线',
  xaxis: { title: 'X轴' },
  yaxis: { title: 'Y轴' }
};

// 渲染图表
Plotly.newPlot('chart-container', [smoothTrace], layout);

额外优化提示 #

• 如果离散点数量过少导致平滑效果不佳，可以先通过插值生成更多中间点（比如简单的线性插值），再传入Plotly绘制
• smoothing参数不要设置过大，否则曲线可能会偏离原始点过多
• 若需要半透明效果，可用rgba格式颜色，比如'rgba(31, 119, 180, 0.7)'

内容的提问来源于stack exchange，提问作者Lê Huy Thanh