AmCharts序列图具有类别的后两行

Question

我有一个序列表，显示了我的网站的唯一身份访问者数量。

这是我现在的图：

我希望游客人数能保持在月份年份以下。我尝试使用html标签br和\ n，但没有一个帮助我。

举例说明我想要的：

"month": "Jul 18\n101",

我的代码：

            <script>
                var chart;
                var graph;

                var chartDataVisitsYear = [ {
                            "month": "May 18",
                            "value": 59
                        }, {
                            "month": "Jun 18",
                            "value": 77
                        }, {
                            "month": "Jul 18",
                            "value": 101
                        }, {
                            "month": "Aug 18",
                            "value": 149
                        }, {
                            "month": "Sep 18",
                            "value": 431
                        }, {
                            "month": "Oct 18",
                            "value": 465
                        }, {
                            "month": "Nov 18",
                            "value": 450
                        }, {
                            "month": "Des 18",
                            "value": 49
                        }, {
                            "month": "Jan 19",
                            "value": 76
                        }, {
                            "month": "Feb 19",
                            "value": 77
                        }, {
                            "month": "Mar 19",
                            "value": 431
                        },{
                            "month": "May 19",
                            "value": 227
                        }];


                AmCharts.ready(function () {

                        // SERIAL CHART
                    chart = new AmCharts.AmSerialChart();
                    chart.dataProvider = chartDataVisitsYear;
                    chart.categoryField = "month";
                    chart.hideCredits = "true";

                    // AXES
                    // Category
                    var categoryAxis = chart.categoryAxis;
                    categoryAxis.gridPosition = "start";
                    categoryAxis.fillAlpha = 1;
                    categoryAxis.gridAlpha = 0;

                    // value
                    var valueAxis = new AmCharts.ValueAxis();
                    valueAxis.axisColor = "#DADADA";
                    valueAxis.gridAlpha = 0.1;
                    chart.addValueAxis(valueAxis);

                    // GRAPH
                    var graph = new AmCharts.AmGraph();
                    graph.title = "Income";
                    graph.valueField = "value";
                    graph.type = "column";
                    graph.lineAlpha = 1;
                    graph.lineColor = "#66d5c9";
                    graph.fillColors = "#99e4dc";
                    graph.fillAlphas = 1;
                    chart.addGraph(graph);

                            // WRITE
                            chart.write("chartdiv_year");
                    });
            </script>
                <div id="chartdiv_year" style="width:100%; height:400px;"></div>

这可能吗？我会提供很多帮助，因为这将使我现在有多少访问者更加清晰。

Answer 1

您可以使用labelFunction即时修改标签，并将值插入类别下：

categoryAxis.labelFunction = function(labelText, serialDataItem) {
   return labelText + "\n" + serialDataItem.dataContext.value;
}

下面的演示

var chart;
var graph;

var chartDataVisitsYear = [{
  "month": "May 18",
  "value": 59
}, {
  "month": "Jun 18",
  "value": 77
}, {
  "month": "Jul 18",
  "value": 101
}, {
  "month": "Aug 18",
  "value": 149
}, {
  "month": "Sep 18",
  "value": 431
}, {
  "month": "Oct 18",
  "value": 465
}, {
  "month": "Nov 18",
  "value": 450
}, {
  "month": "Des 18",
  "value": 49
}, {
  "month": "Jan 19",
  "value": 76
}, {
  "month": "Feb 19",
  "value": 77
}, {
  "month": "Mar 19",
  "value": 431
}, {
  "month": "May 19",
  "value": 227
}];


AmCharts.ready(function() {

  // SERIAL CHART
  chart = new AmCharts.AmSerialChart();
  chart.dataProvider = chartDataVisitsYear;
  chart.categoryField = "month";
  chart.hideCredits = "true";

  // AXES
  // Category
  var categoryAxis = chart.categoryAxis;
  categoryAxis.gridPosition = "start";
  categoryAxis.fillAlpha = 1;
  categoryAxis.labelFunction = function(labelText, serialDataItem) {
    return labelText + "\n" + serialDataItem.dataContext.value;
  }
  categoryAxis.gridAlpha = 0;

  // value
  var valueAxis = new AmCharts.ValueAxis();
  valueAxis.axisColor = "#DADADA";
  valueAxis.gridAlpha = 0.1;
  chart.addValueAxis(valueAxis);

  // GRAPH
  var graph = new AmCharts.AmGraph();
  graph.title = "Income";
  graph.valueField = "value";
  graph.type = "column";
  graph.lineAlpha = 1;
  graph.lineColor = "#66d5c9";
  graph.fillColors = "#99e4dc";
  graph.fillAlphas = 1;
  chart.addGraph(graph);

  // WRITE
  chart.write("chartdiv_year");
});

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv_year" style="width: 100%; height: 500px"></div>