在dataLoader amchart v3中循环

Question

我有一个数据数组，例如，我的HTML视图中有3个Cardview，

每个Cardview都有自己的数据，尤其是在显示图表时。

我已经可以获取循环中的数据，并且可以获取每个图表的值，但是当我运行它时，只有一个图表正在加载，而另外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中陷入这个循环。

Answer 1

您需要为不同的图表分配不同的ID。当前，您的代码循环运行3次，但是每次将图表分配给chartdiv。

您需要拥有3个Div，如下所示：

<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代码中，您需要分配图表以更正div。

  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.