要移除Amcharts4 XYChart容器与图表数据之间的空白,可以使用chart.marginBottom属性来调整底部边距。以下是一个包含代码示例的解决方法:
// 导入Amcharts4库
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";
// 使用动画主题
am4core.useTheme(am4themes_animated);
// 创建图表实例
let chart = am4core.create("chartdiv", am4charts.XYChart);
// 设置容器大小
chart.width = am4core.percent(100);
chart.height = am4core.percent(100);
// 移除底部边距,即移除容器与图表数据之间的空白
chart.marginBottom = 0;
// 添加图表数据
chart.data = [{
"category": "Category 1",
"value": 100
}, {
"category": "Category 2",
"value": 200
}, {
"category": "Category 3",
"value": 150
}];
// 创建X轴
let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
// 创建Y轴
let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// 创建柱状图系列
let series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "value";
series.dataFields.categoryX = "category";
// 显示图表
chart.exporting.menu = new am4core.ExportMenu();
chart.exporting.menu.align = "right";
chart.exporting.menu.verticalAlign = "top";
chart.exporting.menu.items = [{
"label": "Image",
"menu": [{
"type": "png",
"label": "PNG"
}, {
"type": "jpg",
"label": "JPG"
}]
}, {
"label": "Print",
"type": "print"
}];
// 在HTML中创建一个容器来显示图表
在上面的代码中,我们通过设置chart.marginBottom = 0来移除底部边距,从而移除容器与图表数据之间的空白。您可以根据需要调整其他边距属性来改变图表的外观。