Amcharts5 XY 图表显示列上的值和列下的 xlabel

问题描述 投票：0回答：1

我有这个 XY 图表：

我想显示列上的值以及列下的xlabel：

这是我的代码：

<!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
        // https://www.amcharts.com/docs/v5/getting-started/#Root_element
        var rootA = am5.Root.new("chartdiv_assets_per_month");

        // Set themes
        // https://www.amcharts.com/docs/v5/concepts/themes/
        rootA.setThemes([
          am5themes_Animated.new(rootA)
        ]);



        // Create chart
        // https://www.amcharts.com/docs/v5/charts/xy-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
        // https://www.amcharts.com/docs/v5/charts/xy-chart/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
        // https://www.amcharts.com/docs/v5/charts/xy-chart/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
        // https://www.amcharts.com/docs/v5/concepts/animations/
          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 获取要在列上打印的值以及列下的 xlabel？文档https://www.amcharts.com/docs/v5/charts/xy-chart/series/column-series/不包含适合我需要的示例。

amcharts amcharts5
1个回答
0
投票

这是修改后的代码

<!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
      // https://www.amcharts.com/docs/v5/getting-started/#Root_element
      var rootA = am5.Root.new("chartdiv_assets_per_month");

      // Set themes
      // https://www.amcharts.com/docs/v5/concepts/themes/
      rootA.setThemes([
        am5themes_Animated.new(rootA)
      ]);



      // Create chart
      // https://www.amcharts.com/docs/v5/charts/xy-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
      // https://www.amcharts.com/docs/v5/charts/xy-chart/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: true

      }));

      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
      // https://www.amcharts.com/docs/v5/charts/xy-chart/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
        // https://www.amcharts.com/docs/v5/concepts/animations/
        series.appear();


        series.bullets.push(function () {
          return am5.Bullet.new(rootA, {
            locationX: 0.5,
            locationY: 1.2,
            sprite: am5.Label.new(rootA, {
              centerX: am5.p50,
              centerY: am5.p50,
              text: "{name}",
              fill: am5.color(0x000),
              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>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.