如何在AmCharts 5 XY图表中实现柱顶显值、柱底显X轴标签？

我现有一个AmCharts 5 XY柱状图（当前效果：），需要实现两个效果：

• 柱形顶部显示对应数值
• X轴标签显示在柱形下方（目标效果：）

现有代码如下：

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>Graph</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width; initial-scale=1.0" />
  </head>
<body>
<!-- Amcharts -->
    <script src="https://cdn.amcharts.com/lib/5/index.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<!-- //Amcharts -->
<!-- Chart code :: graph_assets_per_month -->
    <script>
    am5.ready(function() {
        // Create root element
        var rootA = am5.Root.new("chartdiv_assets_per_month");

        // Set themes
        rootA.setThemes([
          am5themes_Animated.new(rootA)
        ]);

        // Create chart
        var chartA = rootA.container.children.push(am5xy.XYChart.new(rootA, {
          panX: false,
          panY: false,
          layout: rootA.verticalLayout
        }));

        // Set data
        var data = [{
              xlabelXYChart: "Mar",
              value1: 5850
            },{
              xlabelXYChart: "Apr",
              value1: 5650
            },{
              xlabelXYChart: "May",
              value1: 5950
            },{
              xlabelXYChart: "Jun",
              value1: 5800
            },{
              xlabelXYChart: "Jul",
              value1: 5917
            }];

        // Create axes
        var xAxis = chartA.xAxes.push(am5xy.CategoryAxis.new(rootA, {
          categoryField: "xlabelXYChart",
          renderer: am5xy.AxisRendererX.new(rootA, {
            cellStartLocation: 0.1,
            cellEndLocation: 0.9
          }),
          tooltip: am5.Tooltip.new(rootA, {}),
          stroke: am5.color(0xFFFFFF),
          visible: false
        }));

        xAxis.data.setAll(data);
        var yAxis = chartA.yAxes.push(am5xy.ValueAxis.new(rootA, {
          renderer: am5xy.AxisRendererY.new(rootA, {}),
          stroke: am5.color(0xFFFFFF),
          visible: false
        }));

        // Add series
        function makeSeries(name, fieldName) {
          var series = chartA.series.push(am5xy.ColumnSeries.new(rootA, {
            name: name,
            xAxis: xAxis,
            yAxis: yAxis,
            valueYField: fieldName,
            categoryXField: "xlabelXYChart"
          }));
          series.columns.template.setAll({
            tooltipText: "{categoryX} {name}: {valueY}",
            width: am5.percent(90),
            tooltipY: 0,
            fill: "#2b4356",
            stroke: "#67b7dc"
          });

        series.data.setAll(data);

          // Make stuff animate on load
          series.appear();
          series.bullets.push(function () {
            return am5.Bullet.new(rootA, {
              locationY: 0,
              sprite: am5.Label.new(rootA, {
                text: "{valueY}",
                fill: rootA.interfaceColors.get("alternativeText"),
                centerY: 0,
                centerX: am5.p50,
                populateText: true
              })
            });
          });
          legendA.data.push(series);
        }
        makeSeries("Assets", "value1");

    }); // end am5.ready()
    </script>

    <div id="chartdiv_assets_per_month" style="width: 100%;min-height: 150px;"></div>

<!-- //Chart code :: assets_per_month -->
</body>
</html>

查阅AmCharts 5官方文档未找到对应示例，请问如何实现上述效果？

解决方案 #

1. 显示X轴标签并移至柱形下方 #

原代码中X轴被设置为visible: false，先移除该属性，再配置轴渲染器的标签位置：

• 修改AxisRendererX配置，添加labelLocation: 0.5让标签对齐柱子中心
• 通过paddingTop调整轴与柱子的间距，确保标签在柱子下方

2. 柱形顶部显示数值 #

原代码中的bullet设置locationY: 0是定位在柱底，需改为locationY: 1定位到柱顶，同时调整标签的垂直对齐：

• 将locationY设为1
• 标签的centerY设为1，再通过dy设置负偏移，避免标签与柱子顶部重叠

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>Graph</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width; initial-scale=1.0" />
  </head>
<body>
<!-- Amcharts -->
    <script src="https://cdn.amcharts.com/lib/5/index.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<!-- //Amcharts -->
<!-- Chart code :: graph_assets_per_month -->
    <script>
    am5.ready(function() {
        var rootA = am5.Root.new("chartdiv_assets_per_month");

        rootA.setThemes([
          am5themes_Animated.new(rootA)
        ]);

        var chartA = rootA.container.children.push(am5xy.XYChart.new(rootA, {
          panX: false,
          panY: false,
          layout: rootA.verticalLayout
        }));

        var data = [{
              xlabelXYChart: "Mar",
              value1: 5850
            },{
              xlabelXYChart: "Apr",
              value1: 5650
            },{
              xlabelXYChart: "May",
              value1: 5950
            },{
              xlabelXYChart: "Jun",
              value1: 5800
            },{
              xlabelXYChart: "Jul",
              value1: 5917
            }];

        // 修改X轴配置：显示标签并移至柱下
        var xAxis = chartA.xAxes.push(am5xy.CategoryAxis.new(rootA, {
          categoryField: "xlabelXYChart",
          renderer: am5xy.AxisRendererX.new(rootA, {
            cellStartLocation: 0.1,
            cellEndLocation: 0.9,
            labelLocation: 0.5, // 标签对齐柱子中心
            paddingTop: 10 // 轴与柱子的间距，确保标签在下方
          }),
          tooltip: am5.Tooltip.new(rootA, {}),
          stroke: am5.color(0xFFFFFF)
          // 移除visible: false，显示X轴
        }));

        xAxis.data.setAll(data);
        var yAxis = chartA.yAxes.push(am5xy.ValueAxis.new(rootA, {
          renderer: am5xy.AxisRendererY.new(rootA, {}),
          stroke: am5.color(0xFFFFFF),
          visible: false
        }));

        function makeSeries(name, fieldName) {
          var series = chartA.series.push(am5xy.ColumnSeries.new(rootA, {
            name: name,
            xAxis: xAxis,
            yAxis: yAxis,
            valueYField: fieldName,
            categoryXField: "xlabelXYChart"
          }));
          series.columns.template.setAll({
            tooltipText: "{categoryX} {name}: {valueY}",
            width: am5.percent(90),
            tooltipY: 0,
            fill: "#2b4356",
            stroke: "#67b7dc"
          });

        series.data.setAll(data);

          series.appear();
          // 修改bullet配置：定位到柱顶显示数值
          series.bullets.push(function () {
            return am5.Bullet.new(rootA, {
              locationY: 1, // 定位到柱顶
              sprite: am5.Label.new(rootA, {
                text: "{valueY}",
                fill: rootA.interfaceColors.get("alternativeText"),
                centerY: 1, // 标签底部对齐柱顶
                centerX: am5.p50,
                dy: -5, // 向上偏移5px，避免和柱子重叠
                populateText: true
              })
            });
          });
          // 原代码中legendA未定义，此处注释避免报错；如需图例需先创建
          // var legendA = chartA.children.push(am5.Legend.new(rootA, {}));
          // legendA.data.push(series);
        }
        makeSeries("Assets", "value1");

    }); // end am5.ready()
    </script>

    <div id="chartdiv_assets_per_month" style="width: 100%;min-height: 150px;"></div>

<!-- //Chart code :: assets_per_month -->
</body>
</html>

内容的提问来源于stack exchange，提问作者Europa