javascript - 在 dataLoader amchart v3 中循环

Question

我有一个数据数组，例如，我在 HTML View 中有 3 个 Cardview，

每个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
            }
        });
    }

这是我的 Controller

  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] 元素而不是第一个元素，我不知道该怎么办，我一直在 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.