Цикл в dataLoader amchart v3 - PullRequest
Новая
       8

Цикл в dataLoader amchart v3

2 голосов
/ 29 сентября 2019

У меня есть массив данных, например, у меня есть 3 Cardview в моем представлении в HTML,

у каждого из Cardview есть свои собственные данные, особенно при отображении диаграммы.

Я уже могу получить данные в цикле и уже могу получить значение для каждого графика, но когда я его запускаю, загружается только 1 график, а 2 других Cardview не загружается.

вот мой цикл икод. 

  for(i=0; i<chart.length;i++){ ///Assume that it has a length of 3
        //Single view
        AmCharts.makeChart("chartdiv", {
            type: "serial",
            theme: "light",
            marginRight: 40,
            marginLeft: 40,
            autoMarginOffset: 20,
            mouseWheelZoomEnabled: true,
            dataDateFormat: "YYYY-MM-DD",
            dataLoader: {
                url: url/?id=charr[i].id,
                format: "json"
            },
            categoryField: "date",
            rotate: false, 
            categoryAxis: {
                gridPosition: "start",
                axisColor: "#DADADA",
            },
            valueAxes: [{
                id: "v1",
                axisAlpha: 0,
                position: "left",
                ignoreAxisWidth: true
            }],
            graphs: [{
                id: "g1",
                fillAlphas: 0.5,
                balloon: {
                    borderThickness: 3,
                    horizontalPadding: 17,
                    offsetX: 50,
                    offsetY: 8
                },
                bullet: "round",
                bulletBorderAlpha: 1,
                bulletColor: "#FFFFFF",
                bulletSize: 5,
                hideBulletsCount: 50,
                lineColor: "#2AB4C0",
                lineThickness: 2,
                title: "Total",
                useLineColorForBulletBorder: true,
                valueField: "total",
                balloonText: "[[title]] [[date]]:<b>[[total]]</b>"
            }],
            chartScrollbar: {
                graph: "g1",
                oppositeAxis: false,
                offset: 30,
                scrollbarHeight: 80,
                backgroundAlpha: 0,
                selectedBackgroundAlpha: 0.1,
                selectedBackgroundColor: "#888888",
                graphFillAlpha: 0,
                graphLineAlpha: 0.5,
                selectedGraphFillAlpha: 0,
                selectedGraphLineAlpha: 1,
                autoGridCount: true,
                color: "#AAAAAA"
            },
            chartCursor: {
                pan: true,
                valueLineEnabled: true,
                valueLineBalloonEnabled: true,
                cursorAlpha: 1,
                cursorColor: "#258cbb",
                limitToGraph: "g1",
                valueLineAlpha: 0.2,
                valueZoomable: true
            },
            valueScrollbar: {
                oppositeAxis: false,
                offset: 50,
                scrollbarHeight: 10
            },

            "categoryAxis": {
                labelRotation: 90,
                "wrap": true,
                "parseDates": false,
                "dashLength": 1,
                "minorGridEnabled": true,
            },
            export: {
                enabled: true
            }
        });
    }

Вот мой контроллер 

  public function fetch_all_chartdiv(){

      $id= $_GET['id'];

       $data = $this->model->get_all_chart($id);

          foreach ($data as $usg) {
              array_push($arr, ["total" => ($usg->total), "date_created" => $usg->date]);
          }
          echo json_encode($arr);
      }

    }

Я уже могу получить ответ из 3 диаграмм, но вместо загрузки первого ответа для диаграммы для первого Cardview 

[0]
[1]
[2]

, значение, которое отображается в первом Cardview, это элемент [2] вместо элемента First, я не знаю, что делать, я застрял с этим циклом в Amchart.

1 Ответ

0 голосов
/ 29 сентября 2019

Вам нужно назначить разные идентификаторы для разных графиков.В настоящее время ваш код выполняется в цикле 3 раза, но каждый раз он присваивает диаграмме значение chartdiv.

Вам нужно иметь 3 деления, как показано ниже: 

<div id="chartdiv0" style="width: 640px; height: 400px;"></div>
<div id="chartdiv1" style="width: 640px; height: 400px;"></div>
<div id="chartdiv1" style="width: 640px; height: 400px;"></div>

Затем в вашем коде JS внутри цикла вам нужно назначить диаграмму для правильного деления. 

  for(i=0; i<chart.length;i++){ ///Assume that it has a length of 3
        //Single view
        AmCharts.makeChart("chartdiv" + i , { //Notice i is appended to reference the div.
...