您可以使用amCharts 4中的Label组件来实现类别X轴标签与图表数据对齐。以下是一个示例代码:
HTML部分:
JavaScript部分:
// 导入amCharts 4库
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
// 创建图表实例
let chart = am4core.create("chartdiv", am4charts.XYChart);
// 设置数据
chart.data = [{
"category": "A",
"value": 10
}, {
"category": "B",
"value": 20
}, {
"category": "C",
"value": 15
}];
// 创建类别X轴
let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.minGridDistance = 30; // 控制标签之间的最小间距
// 创建值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";
series.name = "Value";
series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
// 创建标签
let labelBullet = series.bullets.push(new am4charts.LabelBullet());
labelBullet.label.text = "{valueY}";
labelBullet.label.dy = -10; // 控制标签的位置
// 渲染图表
chart.render();
此示例中,我们使用LabelBullet组件作为柱状图系列的子组件,并将其文本设置为{valueY}以显示与柱状图数据对应的标签。通过调整labelBullet.label.dy属性,我们可以控制标签的位置。