amChart更新数据后如何刷新图例并避免图例重复显示

问题原因 #

• 每次AJAX获取新数据后，未清空旧的系列配置直接追加新系列，导致系列堆叠、图例重复
• 重复初始化图例实例，旧图例关联的历史标签没有被清理，出现残留的默认标签

修复要点 #

1. 公共方法抽离，不要在AJAX回调中重复定义createSeries函数
2. 每次更新数据前调用chart.series.clear()清空历史系列
3. 图例仅需在图表初始化时创建一次，数据更新后会自动同步系列配置，无需重复初始化

修复后代码 #

JavaScript 代码 #

am4core.ready(function() {
  am4core.useTheme(am4themes_animated);
  // 创建图表实例
  let chart = am4core.create("chartdiv", am4charts.XYChart);
  // 公共创建系列方法
  function createSeries(field, name) {
    let series = chart.series.push(new am4charts.LineSeries());
    series.dataFields.valueY = field;
    series.dataFields.categoryX = "date";
    series.name = name;
    series.strokeWidth = 2;
    let bullet = series.bullets.push(new am4charts.CircleBullet());
    bullet.circle.stroke = am4core.color("#fff");
    bullet.circle.strokeWidth = 2;
    return series;
  }
  // 初始化默认数据
  chart.data = [{
    "2015": 0,
    "date": 'Jan'
  }, {
    "2015": 10,
    "date": 'Feb'
  }, {
    "2015": 0,
    "date": 'Mrt'
  }, {
    "2015": 10,
    "date": 'Apr'
  }];
  // 创建坐标轴
  let dateAxis = chart.xAxes.push(new am4charts.CategoryAxis());
  dateAxis.renderer.grid.template.location = 0;
  dateAxis.dataFields.category = "date";
  let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
  chart.scrollbarX = new am4core.Scrollbar();
  // 初始化默认系列
  let count_serie = Object.keys(chart.data[0]);
  count_serie.pop();
  for(let i = 0; i < count_serie.length; i++ ) {
    let serie_name = count_serie[i];
    createSeries(serie_name, serie_name);
  }
  // 图例仅初始化一次
  chart.legend = new am4charts.Legend();
  chart.cursor = new am4charts.XYCursor();
  // 查询提交事件
  $("#am_chart_query_selection").on('submit', function(e){
    e.preventDefault();
    $.ajax({
      url: '/xxx/xxxxxx/ajax/amChart.ajax.php',
      method: "GET",
      data: items,
      dataType: "JSON",
      success: function(response){
        // 清空旧系列
        chart.series.clear();
        // 赋值新数据，正式使用时替换为response即可
        chart.data = [{
          "2017": 450,
          "2018": 362,
          "2019": 410,
          "date": 'Jan'
        }, {
          "2017": 455,
          "2018": 365,
          "2019": 415,
          "date": 'Feb'
        }, {
          "2017": 450,
          "2018": 362,
          "2019": 425,
          "date": 'Mrt'
        }, {
          "2017": 450,
          "2018": 362,
          "2019": 435,
          "date": 'Apr'
        }];
        // 创建新系列
        let count_serie = Object.keys(chart.data[0]);
        count_serie.pop();
        for(let i = 0; i < count_serie.length; i++ ) {
          let serie_name = count_serie[i];
          createSeries(serie_name, serie_name);
        }
      },
      error: function (e) {
        alert('数据加载失败');
        console.log("请求失败:", e);
      }
    });
  });
});

HTML 代码 #

<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div>
  <h2>amChart update</h2>
  <form action="" method="get" id="am_chart_query_selection">
    <label for="date_from">查询周期:</label>
    <input type="date" id="date_from" name="date_from">
    <label for="date_untill"> 至 </label>
    <input type="date" id="date_untill" name="date_untill">
    <button id="submit" name="submit" value="search">查询</button>
  </form>
  <div id="chartdiv"></div>
</div>

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