Серийный график AmCharts со вторыми двумя рядами категории - PullRequest
Новая
       24

Серийный график AmCharts со вторыми двумя рядами категории

1 голос
/ 02 мая 2019

У меня есть серийный график, который показывает количество уникальных посетителей моего сайта.

Это мой график сейчас: enter image description here

Я хочу, чтобы число посетителей оставалось меньше месяца-года.Я пытался использовать HTML-тег br, а также \ n, но никто не помог мне.enter image description here

Пример того, что я хочу: 

"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>

Возможно ли это?Я бы очень помог, потому что сразу станет понятно, сколько у меня посетителей.

1 Ответ

1 голос
/ 08 мая 2019

Вы можете использовать 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>
...