AmCharts5 平滑折线图如何在同一图表中添加第二条折线

你只创建了1个平滑折线系列（SmoothedXLineSeries）实例，单系列实例只能渲染1条折线。另外你调用series.data.setAll(data,data_uver)的写法也是错的：setAll方法只会读取第一个传入的数组作为当前系列的数据源，第二个参数会被直接丢弃，所以不管传多少组数据，都只会显示一条线。

• 为第二条折线单独新建一个SmoothedXLineSeries实例，和第一条折线共用已创建的x、y轴
• 给两个系列实例分别绑定自己对应的数据源
• 按需给第二个系列配置填充透明度、数据点样式、提示框文本即可

am5.ready(function() {
var root = am5.Root.new("chartdiv");

root.setThemes([
    am5themes_Animated.new(root)
]);

var chart = root.container.children.push(am5xy.XYChart.new(root, {
panX: true,
panY: true,
wheelX: "panX",    
wheelY: "zoomX",
pinchZoomX:true
}));

var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {
behavior: "none"
}));
cursor.lineY.set("visible", false);

function generateDataInvestice(roky,investice) {
   value = investice;
   return {
   date: roky,
   value: value
};
}

function generateDatasInvestice(count,i) {
  var data = [];
  var investice = 5;
  for (var i = 1; i < count; ++i) {
    data.push(generateDataInvestice(i,investice));
  }
  return data;
}

function generateDataUver(roky,uver) {
  value = uver;
  return {
    date: roky,
    value: value
  };
}
function generateDatasUver(count,i) {
  var data = [];
  var uver = 1;
  for (var i = 1; i < count; ++i) {
    data.push(generateDataUver(i,uver));
  }
  return data;
}

var xAxis = chart.xAxes.push(am5xy.ValueAxis.new(root, {
  maxDeviation: 1,
  baseInterval: {
    count: 1
  },
  renderer: am5xy.AxisRendererX.new(root, {
  pan:"zoom"
}),
  tooltip: am5.Tooltip.new(root, {})
}));

var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
  maxDeviation:1,
  renderer: am5xy.AxisRendererY.new(root, {
  pan:"zoom"
})
}));

// 第一条投资折线
var seriesInvestice = chart.series.push(am5xy.SmoothedXLineSeries.new(root, {
  name: "投资",
  xAxis: xAxis,
  yAxis: yAxis,
  valueYField: "value",
  valueXField: "date",
  tooltip: am5.Tooltip.new(root, {
    labelText: "投资值：{valueY}"
  })
}));

seriesInvestice.fills.template.setAll({
  visible: true,
  fillOpacity: 0.2
});

seriesInvestice.bullets.push(function() {
  return am5.Bullet.new(root, {
    locationY: 0,
    sprite: am5.Circle.new(root, {
      radius: 4,
      stroke: root.interfaceColors.get("background"),
      strokeWidth: 2,
      fill: seriesInvestice.get("fill")
    })
  });
});

// 第二条贷款折线 单独创建系列实例
var seriesUver = chart.series.push(am5xy.SmoothedXLineSeries.new(root, {
  name: "贷款",
  xAxis: xAxis,
  yAxis: yAxis,
  valueYField: "value",
  valueXField: "date",
  // 可手动指定颜色区分两条线，比如 stroke: am5.color(0xff6666), fill: am5.color(0xff6666)
  tooltip: am5.Tooltip.new(root, {
    labelText: "贷款值：{valueY}"
  })
}));

seriesUver.fills.template.setAll({
  visible: true,
  fillOpacity: 0.2
});

seriesUver.bullets.push(function() {
  return am5.Bullet.new(root, {
    locationY: 0,
    sprite: am5.Circle.new(root, {
      radius: 4,
      stroke: root.interfaceColors.get("background"),
      strokeWidth: 2,
      fill: seriesUver.get("fill")
    })
  });
});

var data = generateDatasInvestice(30,0);
var data_uver = generateDatasUver(30,0);
// 分别给两个系列绑定数据源
seriesInvestice.data.setAll(data);
seriesUver.data.setAll(data_uver);

seriesInvestice.appear(30);
seriesUver.appear(30);
chart.appear(1000, 100);

});

AmCharts v5的XY图支持在同一坐标系下添加任意多个系列，不管是折线、柱状、面积图都可以混排，核心规则就是每一个可视化图形对应一个独立的series实例，不要尝试给单个series传多组数据实现多图形展示。如果需要加图例，直接在chart容器下新增Legend组件，把需要展示的series传入即可自动生成。

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