以下是一个使用AmCharts库创建传递动态数据的堆叠面积图的示例代码:
首先,您需要引入AmCharts库和主题文件(如果需要):
接下来,您可以创建一个包含图表的容器:
然后,您可以使用以下JavaScript代码创建堆叠面积图:
// 创建一个堆叠面积图实例
var chart = am4core.create("chartdiv", am4charts.XYChart);
// 设置数据源为动态数据
chart.dataSource.url = "data.json";
chart.dataSource.parser = new am4core.JSONParser();
chart.dataSource.reloadFrequency = 5000; // 重新加载数据的频率(以毫秒为单位)
chart.dataSource.incremental = true; // 启用增量更新
// 创建类别轴
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.grid.template.location = 0;
// 创建值轴
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.minWidth = 50;
// 创建堆叠面积图系列
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "value";
series.dataFields.categoryX = "category";
series.strokeWidth = 2;
series.fillOpacity = 0.6;
series.stacked = true;
// 添加一个滚动条
chart.scrollbarX = new am4core.Scrollbar();
// 应用动画主题
chart.theme = am4themes_animated;
最后,您需要创建一个数据文件(例如data.json),其中包含动态数据:
[
{
"category": "2019-01-01",
"value": 100
},
{
"category": "2019-01-02",
"value": 150
},
{
"category": "2019-01-03",
"value": 200
},
// 添加更多数据...
]
请注意,上述示例中的数据源是一个静态的JSON文件。如果您要使用动态数据源,您需要将chart.dataSource.url更改为要使用的数据源的URL。
希望这可以帮助您创建一个AmCharts库的堆叠面积图,并传递动态数据。