如何在 amCharts 中为多个数据系列设置不同颜色

在 amcharts 5 中，若多个系列共用同一配置对象（尤其是包含相同 `name` 的 `settings`），会导致颜色等属性被意外共享；正确做法是为每个系列创建独立的配置对象，并确保 `name` 唯一。

在使用 am5xy.SmoothedXLineSeries.new(root, settings) 创建多条折线时，一个常见却隐蔽的问题是：所有系列颜色同步变化，即使你对每个系列单独调用 series.set("stroke", color)。根本原因并非 stroke 设置失效，而是你传入的 settings 对象被重复引用——特别是其中的 name 字段。

amCharts 5 将 name 作为系列的唯一标识符。当多个系列使用完全相同的 settings（例如同一个对象字面量或变量），它们会被内部视为“同一逻辑系列”的多次实例化，导致样式（如 stroke）被统一管理，修改其一即影响全部。

✅ 正确做法：为每个系列动态生成独立的 settings 对象，并确保 name 唯一。以下是优化后的代码示例：

const createSeries = (data, color, name) => {
  // ✅ 每次调用都创建全新 settings 对象，name 动态传入
  const settings = {
    name: name, // 关键：必须唯一，如 "Sales Q1", "Sales Q2"
    xAxis: xAxis,
    yAxis: yAxis,
    valueYField: "value",
    valueXField: "date",
    tooltip: am5.Tooltip.new(root, {
      labelText: "{valueY}"
    })
  };

  const series = am5xy.SmoothedXLineSeries.new(root, settings);
  series.set("stroke", color);
  series.set("fill", color); // 可选：填充区域时需设置

  // 配置数据点气泡
  series.bullets.push(() => am5.Bullet.new(root, {
    locationY: 0,
    sprite: am5.Circle.new(root, {
      radius: 4,
      stroke: color,
      strokeWidth: 2,
      fill: am5.Color.brighten(color, -0.3),
      tooltipText: "{valueY}"
    })
  }));

  series.data.setAll(data);
  chart.series.push(series);
};

// 使用示例：创建两个颜色、名称均不同的系列
createSeries([
  { date: new Date(2025, 0, 1), value: 12 },
  { date: new Date(2025, 0, 2), value: 18 }
], am5.color(0x37a1e5), "Revenue");

createSeries([
  { date: new Date(2025, 0, 1), value: 8 },
  { date: new Date(2025, 0, 2), value: 15 }
], am5.color(0xff6b6b), "Expenses");

⚠️ 注意事项：

• 永远不要复用 settings 对象：避免 const settings = {...} 定义在函数外并多次传入；
• name 是必需且必须唯一：它不仅用于图例显示，更是 amCharts 内部识别系列的关键键；
• 若使用 chart.get("series").push(series) 后再修改 series.set("stroke")，只要 settings.name 不冲突，即可安全独立控制；
• 如需主题化配色，可结合 am5.Color.set() 或预定义调色板数组循环分配。

总结：amCharts 5 的系列隔离依赖于配置对象的独立性与 name 的唯一性。脱离“共享配置陷阱”，才能真正实现多系列自由配色与样式定制。