使用Apexcharts更新2条折线图数据JSON API和AJAX的示例。

以下是一个使用JSON API和AJAX更新Apexcharts折线图的示例代码：

HTML代码：

JavaScript代码：

var chart = new ApexCharts(document.querySelector("#chart"), { series: [ { name: "Series 1", data: [30, 40, 35, 50, 49, 60, 70, 91, 125] }, { name: "Series 2", data: [23, 35, 30, 45, 40, 50, 60, 80, 105] } ], chart: { height: 350, type: "line" }, xaxis: { categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"] }, markers: { size: 0 }, yaxis: { title: { text: "Sales" } } });

chart.render();

// 更新数据

function updateChart() { $.ajax({ url: "data.json", type: "GET", dataType: "json", success: function(data) { chart.updateSeries(data); }, error: function(xhr, textStatus, errorThrown) { console.log("Error: " + errorThrown); } }); }

代码解释：

1. 创建了一个包含两个系列的Apexcharts折线图。
2. 当页面首次加载时，调用了chart.render()方法渲染图表。
3. updateChart()函数会使用AJAX从data.json文件中获取最新数据来更新图表。这里假设data.json文件已经存在。
4. 在AJAX成功获取数据后，使用chart.updateSeries()方法来更新折线图数据。

注意： 如果想让此处的AJAX方法成功获取数据，需要先创建data.json文件，内容为以下代码：

{ "series": [ { "name": "Series 1", "data": [70, 80, 75, 90, 89, 100, 110, 131, 165] }, { "name": "Series 2", "data": [63, 75, 70, 85, 80, 90, 100, 120, 145] } ] }

此时通过调用updateChart()函数即可使用AJAX