在AmCharts中,可以使用columnSpacing属性来设置堆叠柱状图之间的空行。以下是一个示例代码:
am4core.useTheme(am4themes_animated);
// 创建图表实例
var chart = am4core.create("chartdiv", am4charts.XYChart);
// 设置数据
chart.data = [{
"category": "A",
"value1": 10,
"value2": 15
}, {
"category": "B",
"value1": 20,
"value2": 25
}, {
"category": "C",
"value1": 30,
"value2": 35
}];
// 创建类别坐标轴
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.minGridDistance = 20;
// 创建值坐标轴
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 = "Series 1";
series1.columns.template.column.strokeWidth = 0;
series1.columns.template.width = am4core.percent(80);
series1.columns.template.tooltipText = "{categoryX}: {valueY}";
// 创建另一个柱状图系列
var series2 = chart.series.push(new am4charts.ColumnSeries());
series2.dataFields.valueY = "value2";
series2.dataFields.categoryX = "category";
series2.name = "Series 2";
series2.columns.template.column.strokeWidth = 0;
series2.columns.template.width = am4core.percent(80);
series2.columns.template.tooltipText = "{categoryX}: {valueY}";
// 设置堆叠柱状图之间的空行
series1.stacked = true;
series2.stacked = true;
series1.columns.template.column.spacing = 0.1;
series2.columns.template.column.spacing = 0.1;
// 添加图例
chart.legend = new am4charts.Legend();
// 更新图表样式
chart.cursor = new am4charts.XYCursor();
chart.scrollbarX = new am4core.Scrollbar();
// 添加图表到指定的div元素中
chart.exporting.menu = new am4core.ExportMenu();
chart.exporting.menu.items = [{
"label": "...",
"menu": [
{ "type": "png", "label": "PNG" },
{ "type": "jpg", "label": "JPG" },
{ "type": "pdf", "label": "PDF" }
]
}];
在上面的代码中,series1.columns.template.column.spacing和series2.columns.template.column.spacing属性被设置为0.1,这样就会在堆叠柱状图之间创建一个空行。您可以根据需要调整此值以更改空行的大小。