javascript - 如何在 amcharts 中添加多个图表

Question

我是 amcharts 新手，我正在使用以下代码在图表中生成两个图表。

 var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "dataLoader": {
    "url": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/218423/data1.json"
  },
  "valueAxes": [{
    "gridColor": "#FFFFFF",
    "gridAlpha": 0.2,
    "dashLength": 0
  }],
  "gridAboveGraphs": true,
  "startDuration": 1,
  "graphs": [{
    "balloonText": "[[category]]: <b>[[value]]</b>",
    "fillAlphas": 0.8,
    "lineAlpha": 0.2,
    "type": "column",
    "valueField": "visits"
  }],
  "chartCursor": {
    "categoryBalloonEnabled": false,
    "cursorAlpha": 0,
    "zoomable": false
  },
  "categoryField": "country",
  "categoryAxis": {
    "gridPosition": "start",
    "gridAlpha": 0,
    "tickPosition": "start",
    "tickLength": 20
  }
});

function setDataSet(dataset_url) {
  AmCharts.loadFile(dataset_url, {}, function(data) {
    chart.dataProvider = AmCharts.parseJSON(data);
    chart.validateData();
  });

所以这工作完美，现在我想在图表中添加多个图表，而不是一个图表。但我不想在我需要多少图表之前定义(没有固定大小)。那么如何在 amcharts 中动态添加图表？任何帮助表示感谢

Answer 1

假设您已经预先知道了categoryField，您可以使用dataLoader的complete回调来查看新分配的dataProvider数组并根据数组对象中的键创建图表.

  "dataLoader": {
    "url": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/SO-41015973.json",
    "complete": function(chart) {
      //get potential valueFields after filtering out the categoryField
      var valueFields = Object.keys(chart.dataProvider[0]).filter(function(value) {
        return value !== chart.categoryField;
      });
      //create the graphs
      valueFields.forEach(function(valueField) {
        chart.graphs.push({
          "valueField": valueField,
          "type": "column",
          "balloonText": "[[category]]: <b>[[value]]</b>",
          "fillAlphas": 0.8,
          "lineAlphas": 0.2
        })
      });
    }
  },

我向您的数据添加了一个额外的字段并创建了 codepen demo以证明这是有效的。