以下是使用AmCharts库创建连续图表,并显示包含两行类别的第二行的代码示例:
HTML部分:
JavaScript部分:
// 创建图表实例
var chart = am4core.create("chartdiv", am4charts.XYChart);
// 设置图表数据
chart.data = [{
"category1": "A",
"category2": "1",
"value": 10
}, {
"category1": "A",
"category2": "2",
"value": 15
}, {
"category1": "B",
"category2": "1",
"value": 20
}, {
"category1": "B",
"category2": "2",
"value": 25
}];
// 创建分类轴
var categoryAxis1 = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis1.dataFields.category = "category1";
categoryAxis1.title.text = "Category 1";
var categoryAxis2 = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis2.dataFields.category = "category2";
categoryAxis2.title.text = "Category 2";
categoryAxis2.renderer.grid.template.location = 0.5;
categoryAxis2.renderer.labels.template.location = 0.5;
categoryAxis2.renderer.minGridDistance = 10;
// 创建值轴
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.title.text = "Value";
// 创建列系列
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "value";
series.dataFields.categoryX = "category1";
series.columns.template.tooltipText = "{category1}, {category2}: {valueY}";
// 配置图表外观
chart.padding(40, 40, 40, 40); // 图表内边距
chart.legend = new am4charts.Legend(); // 图例
// 将图表渲染到页面上
chart.exporting.menu = new am4core.ExportMenu(); // 导出菜单
chart.exporting.filePrefix = "amCharts_example"; // 导出文件名前缀
chart.exporting.useWebFonts = false; // 禁用Web字体
chart.exporting.useRetina = true; // 使用Retina分辨率
// 在页面加载完毕后执行图表绘制
document.addEventListener("DOMContentLoaded", function(event) {
chart.draw();
});
请确保将AmCharts库的脚本文件正确引入到HTML页面中。这个代码示例创建了一个带有两行类别的连续图表,第一行类别为"category1",第二行类别为"category2"。图表的值由"value"字段提供。