AMchart绘制数组中的时间序列数据

AMCharts 是一个流行的 JavaScript 图表库，用于创建交互式图表。要在 AMCharts 中绘制数组中的时间序列数据，你需要遵循以下步骤：

引入 AMCharts 库：首先，你需要在你的 HTML 文件中引入 AMCharts 库。你可以从 AMCharts 官网下载库文件，或者使用 CDN 链接。 <script src="https://www.amcharts.com/lib/5/index.js"></script> <script src="https://www.amcharts.com/lib/5/xy.js"></script> <script src="https://www.amcharts.com/lib/5/themes/Animated.js"></script>
准备时间序列数据：确保你的时间序列数据是一个数组，其中每个元素都是一个包含时间和值的对象。例如： const data = [ { date: new Date(2021, 0, 1), value: 100 }, { date: new Date(2021, 0, 2), value: 150 }, { date: new Date(2021, 0, 3), value: 200 }, // 更多数据... ];
创建图表实例：使用 AMCharts 创建一个 XY 图表实例。 am5.ready(function() { // 创建根元素 var root = am5.Root.new("chartdiv"); // 设置主题 root.setThemes([ am5themes_Animated.new(root) ]); // 创建 XY 图表 var chart = root.container.children.push(am5xy.XYChart.new(root, { panX: true, panY: true, wheelX: "panX", wheelY: "zoomX" })); // 添加数据 var series = chart.series.push(am5xy.LineSeries.new(root, { name: "Series", xAxis: xAxis, yAxis: yAxis, valueYField: "value", valueXField: "date" })); series.data.setAll(data); // 创建 X 轴 var xAxis = chart.xAxes.push(am5xy.DateAxis.new(root, { baseInterval: { timeUnit: "day", count: 1 }, renderer: am5xy.AxisRendererX.new(root, {}) })); // 创建 Y 轴 var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, { renderer: am5xy.AxisRendererY.new(root, {}) })); // 设置数据范围 chart.events.on("datavalidated", function() { chart.zoomToDates(new Date(2021, 0, 1), new Date(2021, 0, 3)); }); });
HTML 结构：确保你的 HTML 文件中有一个容器元素来承载图表。 <div id="chartdiv" style="width: 100%; height: 500px;"></div>
运行代码：将上述代码放在你的 HTML 文件中，并在浏览器中打开文件。你应该能看到一个包含时间序列数据的折线图。