amCharts绘制柱形图默认显示数值

使用amCharts.js绘制柱形图(column chart)时,有时需要默认显示每一个柱子的数值。

通过在AmCharts.AmGraph中设置labelText属性为[[value]],即可实现上述需求。

效果如下所示:

 

上例的代码如下所示:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>amCharts examples</title>
    <link rel="stylesheet" href="style.css" type="text/css">
    <script src="https://www.amcharts.com/lib/3/amcharts.js" type="text/javascript"></script>
    <script src="https://www.amcharts.com/lib/3/serial.js" type="text/javascript"></script>
    <script src="https://www.amcharts.com/lib/3/themes/light.js"></script>

    <script>
      var chart;

      var chartData = [
        {
          "country": "China",
          "visits": 2325
        },
        {
          "country": "USA",
          "visits": 1822
        },
        {
          "country": "Japan",
          "visits": 1809
        },
        {
          "country": "Germany",
          "visits": 1322
        },
        {
          "country": "UK",
          "visits": 1122
        },
        {
          "country": "France",
          "visits": 1114
        }
      ];


      AmCharts.ready(function () {
        // SERIAL CHART
        chart = new AmCharts.AmSerialChart(AmCharts.themes.light);
        chart.dataProvider = chartData;
        chart.categoryField = "country";
        chart.startDuration = 1;

        // AXES
        // category
        var categoryAxis = chart.categoryAxis;
        categoryAxis.labelRotation = 90;
        categoryAxis.gridPosition = "start";

        // value
        // in case you don't want to change default settings of value axis,
        // you don't need to create it, as one value axis is created automatically.

        // GRAPH
        var graph = new AmCharts.AmGraph();
        graph.valueField = "visits";
        graph.balloonText = "[[category]]: <b>[[value]]</b>";
        graph.type = "column";
        graph.lineAlpha = 0;
        graph.fillAlphas = 0.8;

        // display label text on each column
        graph.labelText = "[[value]]";
        chart.addGraph(graph);

        // CURSOR
        var chartCursor = new AmCharts.ChartCursor();
        chartCursor.cursorAlpha = 0;
        chartCursor.zoomable = false;
        chartCursor.categoryBalloonEnabled = false;
        chart.addChartCursor(chartCursor);

        chart.creditsPosition = "top-right";

        chart.write("chartdiv");
      });
    </script>
  </head>

  <body>
    <div id="chartdiv" style="width: 100%; height: 300px;"></div>
  </body>

</html>

 

本文链接:http://bookshadow.com/weblog/2015/08/27/amcharts-column-chart-label-text/
请尊重作者的劳动成果,转载请注明出处!书影博客保留对文章的所有权利。

如果您喜欢这篇博文,欢迎您捐赠书影博客: ,查看支付宝二维码

Pingbacks已关闭。

评论
  1. zy zy 发布于 2016年2月19日 11:14 #

    折线图只显示其中一个节点的Label值,怎么做?

  2. 在线疯狂 在线疯狂 发布于 2016年2月19日 18:32 #

    暂时没有找到可行的办法。。。

  3. van van 发布于 2017年11月14日 10:22 #

    求问怎样自定义每个柱子的labelText,即显示数值与value不同

张贴您的评论