以下是使用AmCharts 4库创建分组数据图表的示例代码:
首先,确保在HTML文件的头部包含AmCharts库的引用:
然后,在HTML文件中创建一个容器元素用于显示图表:
接下来,在JavaScript文件中编写代码以创建分组数据图表:
// 指定数据
var chartData = [
{
category: "Category 1",
value1: 10,
value2: 15
},
{
category: "Category 2",
value1: 20,
value2: 25
},
{
category: "Category 3",
value1: 30,
value2: 35
}
];
// 创建图表实例
var chart = am4core.create("chartdiv", am4charts.XYChart);
// 设置图表主题
chart.colors.step = 2;
chart.padding(30, 30, 10, 30);
// 创建分类轴
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.minGridDistance = 60;
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.labels.template.rotation = -90;
categoryAxis.renderer.labels.template.horizontalCenter = "left";
categoryAxis.renderer.labels.template.verticalCenter = "middle";
// 创建值轴
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// 创建柱状图系列
var series1 = chart.series.push(new am4charts.ColumnSeries());
series1.dataFields.categoryX = "category";
series1.dataFields.valueY = "value1";
series1.clustered = false;
series1.tooltipText = "Value 1: {valueY}";
series1.columns.template.strokeWidth = 0;
var series2 = chart.series.push(new am4charts.ColumnSeries());
series2.dataFields.categoryX = "category";
series2.dataFields.valueY = "value2";
series2.clustered = false;
series2.tooltipText = "Value 2: {valueY}";
series2.columns.template.strokeWidth = 0;
// 添加图例
chart.legend = new am4charts.Legend();
// 添加主题
chart.theme = am4themes_animated;
最后,将上述代码保存,并在浏览器中打开HTML文件,即可看到生成的分组数据图表。