如何使用AMCharts V5添加X Axis和Y Axis标题

Question

我使用的是amCharts版本5。如何沿x轴和y轴添加标签。我正在使用ValueAxis(在XY图表中)。为了更好地理解，请附上下面的图片

我找到了关于如何在V4中实现它的文档，但没有找到V5。

在V4:中

valueAxis.title.text="营业额($M)"；；

X轴Y轴标签

Answer 1

使用amCharts 5，您可以使用此处介绍的Label类：Labels–amCharts 5 Documentation

完整的参考资料如下：标签-amCharts 5文档

因此，您只需使用new方法为每个轴创建一个Label实例。我建议您在xAxis.children上push一个实例，在yAxis.children上unshift另一个实例。如果您每次都使用push，由于轴的子对象的自然顺序，您可能需要在定位方面做一些额外的工作。

你会在下面找到一个例子。

am5.ready(() => {
let root = am5.Root.new("chartdiv");
let chart = root.container.children.push(am5xy.XYChart.new(root, {}));
let xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
categoryField: "category",
renderer: am5xy.AxisRendererX.new(root, {})
}));

xAxis.children.push(am5.Label.new(root, {
text: 'xAxis title',
textAlign: 'center',
x: am5.p50,
fontWeight: 'bold'
}));
let yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
renderer: am5xy.AxisRendererY.new(root, {})
}));

yAxis.children.unshift(am5.Label.new(root, {
text: 'yAxis title',
textAlign: 'center',
y: am5.p50,
rotation: -90,
fontWeight: 'bold'
}));
let series = chart.series.push(am5xy.ColumnSeries.new(root, {
name: "Series",
xAxis: xAxis,
yAxis: yAxis,
valueYField: "value",
categoryXField: "category"
}));
let data = [
{
category: "Foo",
value: 1337
},
{
category: "Bar",
value: 42
}
];
xAxis.data.setAll(data);
series.data.setAll(data);
});

#chartdiv {
width: 100%;
height: 350px;
}

<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<div id="chartdiv"></div>