以下是一个使用AmCharts库创建多系列堆叠柱形图的基本示例:
首先,确保已经引入了AmCharts库的脚本文件。可以从AmCharts官方网站下载并引入。
创建一个HTML元素,用于容纳图表。例如,创建一个具有id为"chartdiv"的div元素:
function createChart() {
// 创建图表实例
var chart = am4core.create("chartdiv", am4charts.XYChart);
// 设置图表的数据源
chart.data = [
{
category: "类别1",
value1: 100,
value2: 200,
value3: 300
},
{
category: "类别2",
value1: 150,
value2: 250,
value3: 350
},
{
category: "类别3",
value1: 200,
value2: 300,
value3: 400
}
];
// 创建类别轴
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());
// 创建柱形图系列
var series1 = chart.series.push(new am4charts.ColumnSeries());
series1.dataFields.valueY = "value1";
series1.dataFields.categoryX = "category";
series1.name = "系列1";
series1.stacked = true;
var series2 = chart.series.push(new am4charts.ColumnSeries());
series2.dataFields.valueY = "value2";
series2.dataFields.categoryX = "category";
series2.name = "系列2";
series2.stacked = true;
var series3 = chart.series.push(new am4charts.ColumnSeries());
series3.dataFields.valueY = "value3";
series3.dataFields.categoryX = "category";
series3.name = "系列3";
series3.stacked = true;
// 添加图例
chart.legend = new am4charts.Legend();
// 开始绘制图表
chart.invalidate();
}
// 调用创建图表的函数
createChart();
以上代码将创建一个包含三个系列的堆叠柱形图。每个系列都有自己的名称和数据。图表将被绘制在id为"chartdiv"的div元素中。
请注意,上述示例中的代码使用AmCharts的最新版本,并假定已正确引入AmCharts库。如果使用不同的版本或其他相关库,请根据实际情况进行调整。