以下是一个使用amCharts库添加多个系列的示例代码:
HTML代码:
JavaScript代码:
// 创建一个amCharts实例
var chart = am4core.create("chartdiv", am4charts.XYChart);
// 设置图表数据源
chart.dataSource.url = "data.json";
chart.dataSource.parser = new am4core.JSONParser();
// 创建x轴
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "date";
// 创建y轴
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.minWidth = 50;
// 创建系列数组
var series = [];
// 创建第一个系列
var series1 = chart.series.push(new am4charts.LineSeries());
series1.dataFields.valueY = "value1";
series1.dataFields.categoryX = "date";
series1.name = "Series 1";
series1.tooltipText = "{name}: [bold]{valueY}[/]";
series.push(series1);
// 创建第二个系列
var series2 = chart.series.push(new am4charts.LineSeries());
series2.dataFields.valueY = "value2";
series2.dataFields.categoryX = "date";
series2.name = "Series 2";
series2.tooltipText = "{name}: [bold]{valueY}[/]";
series.push(series2);
// 添加数据
chart.data = [
{ "date": "2022-01-01", "value1": 10, "value2": 20 },
{ "date": "2022-01-02", "value1": 15, "value2": 25 },
{ "date": "2022-01-03", "value1": 8, "value2": 18 }
];
上述代码创建了一个包含两个系列的amCharts实时数据图表。它使用am4charts.LineSeries创建了两个折线系列,并将它们添加到chart.series数组中。每个系列使用dataFields属性指定数据源中的字段,并使用name和tooltipText属性设置系列的名称和工具提示文本。
最后,使用chart.data属性设置图表的数据。
请注意,上述示例代码仅为演示目的,实际应用中您可能需要从合适的数据源加载和更新数据。