AmCharts v3循环生成多Cardview图表加载异常问题

我一眼就揪出了几个关键问题，这正是导致你图表加载异常的核心原因：

1. DOM容器ID重复（最直接的问题） #

你在循环里每次都调用AmCharts.makeChart("chartdiv", ...)，但DOM中ID是唯一标识，三个图表都会往同一个chartdiv元素里渲染，最终只有最后一次循环的图表会保留（也就是下标[2]的数据），另外两个容器根本没被用到。

2. 循环变量的异步绑定问题 #

即使你改了ID，如果用var i声明循环变量，由于dataLoader是异步请求，当请求返回时，循环已经结束，i的值会固定为最后一个索引（2），导致所有图表都请求最后一个ID的数据。

3. URL拼接错误 #

你写的url/?id=charr[i].id是字符串字面量，并没有把chart[i].id的实际值拼进去，应该是笔误（charr应该是chart）+ 字符串拼接错误。

具体修复步骤 #

第一步：修改HTML中的图表容器 #

给每个Cardview里的图表容器设置唯一ID，比如：

<!-- 第一个Cardview -->
<div class="card-view">
  <div id="chartdiv-0"></div>
</div>
<!-- 第二个Cardview -->
<div class="card-view">
  <div id="chartdiv-1"></div>
</div>
<!-- 第三个Cardview -->
<div class="card-view">
  <div id="chartdiv-2"></div>
</div>

第二步：重构前端循环代码 #

推荐使用forEach循环代替for循环（天然解决异步变量绑定问题），同时修正ID和URL拼接：

// 假设chart是你的数据数组
chart.forEach((chartItem, index) => {
  AmCharts.makeChart(`chartdiv-${index}`, { 
    type: "serial", 
    theme: "light", 
    marginRight: 40, 
    marginLeft: 40, 
    autoMarginOffset: 20, 
    mouseWheelZoomEnabled: true, 
    dataDateFormat: "YYYY-MM-DD", 
    dataLoader: { 
      // 修正URL拼接：用模板字符串注入实际ID，同时修正变量名charr为chart
      url: `${url}?id=${chartItem.id}`, 
      format: "json" 
    }, 
    categoryField: "date_created", // 注意：后端返回的是date_created，你之前写的是date，要对应！
    rotate: false, 
    categoryAxis: { 
      gridPosition: "start", 
      axisColor: "#DADADA", 
      labelRotation: 90, 
      wrap: true, 
      parseDates: false, 
      dashLength: 1, 
      minorGridEnabled: true, 
    }, 
    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_created]]:<b>[[total]]</b>" // 同样，这里的date要改成date_created
    }], 
    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 
    }, 
    export: { enabled: true } 
  }); 
});

注意：我还修正了一个细节——你前端配置里的categoryField: "date"和后端返回的date_created字段不匹配，这也会导致图表加载失败，必须统一！

第三步：后端代码小优化 #

你的后端代码里$arr没有初始化，虽然你说能获取数据，但为了避免潜在错误，建议加上初始化：

public function fetch_all_chartdiv(){ 
  $id= $_GET['id']; 
  $arr = []; // 新增：初始化数组
  $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); 
}

这样修改后，三个图表会分别渲染到对应的容器中，每个容器请求对应ID的数据，就能解决你遇到的加载和数据错位问题了。

内容的提问来源于stack exchange，提问作者Janessa Bautista