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

Question

我正在使用 amCharts 版本 5。如何沿 xAxis 和 y Axis 添加标签。我正在使用 ValueAxis（在 XY 图表中）。附上下面的图片以便更好地理解

我能够找到有关如何在 V4 中实现它的文档，但在 V5 中却找不到。

在 V4 中：

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

X 轴 Y 轴标签

Answer 1

对于amCharts 5，您可以使用Label此处介绍的类：Labels \xe2\x80\x93 amCharts 5 Documentation

\n

完整的参考资料在这里：Label \xe2\x80\x93 amCharts 5 Documentation

\n

因此，您所要做的就是Label使用该方法为每个轴创建一个实例new。我向您推荐push您的一个实例xAxis.children和unshift您的另一个实例yAxis.children。如果每次都使用push，由于轴子项的自然顺序，您可能需要在定位方面做一些额外的工作。

\n

您将在下面找到一个示例。

\n

\r\n

\r\n

am5.ready(() => {\n\n  let root = am5.Root.new("chartdiv");\n\n  let chart = root.container.children.push(am5xy.XYChart.new(root, {}));\n\n  let xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {\n    categoryField: "category",\n    renderer: am5xy.AxisRendererX.new(root, {})\n  }));\n  \n  xAxis.children.push(am5.Label.new(root, {\n    text: \'xAxis title\',\n    textAlign: \'center\',\n    x: am5.p50,\n    fontWeight: \'bold\'\n  }));\n\n  let yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {\n    renderer: am5xy.AxisRendererY.new(root, {})\n  }));\n  \n  yAxis.children.unshift(am5.Label.new(root, {\n    text: \'yAxis title\',\n    textAlign: \'center\',\n    y: am5.p50,\n    rotation: -90,\n    fontWeight: \'bold\'\n  }));\n\n  let series = chart.series.push(am5xy.ColumnSeries.new(root, {\n    name: "Series",\n    xAxis: xAxis,\n    yAxis: yAxis,\n    valueYField: "value",\n    categoryXField: "category"\n  }));\n\n  let data = [\n    {\n      category: "Foo",\n      value: 1337\n    },\n    {\n      category: "Bar",\n      value: 42\n    }\n  ];\n\n  xAxis.data.setAll(data);\n  series.data.setAll(data);\n\n});

\r\n

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

\r\n

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

\r\n

\r\n

\r\n

\n