在 AmCharts 中切换到 JSON 数据不起作用

如何解决在 AmCharts 中切换到 JSON 数据不起作用

Amcharts 的新用户（和编程！）并尝试使用他们的示例之一 (https://codepen.io/team/amcharts/pen/gOpWroQ), 但是当我从外部 JSON 文件中提取数据时，它无法正常工作。 JSON 结构和格式是正确的，我从字面上将数据从 JSON 文件复制到 var data [] 并且它工作正常。
笔在这里：https://codepen.io/moneycarlo/pen/zYKdyGz（但是我无法托管 json 文件）。

第 10 行是我加载 JSON 数据的地方，但如果我删除 var 数据信息并取消注释第 10 行，结果不会绘制 4 行。相反，它是 1 行，每个日期都有多个堆叠点。

我猜这是预处理器中的东西。我的印象是，当您从 JSON 之类的外部数据加载时，它会自动分配给 data 属性，并且这些函数的工作方式相同。

我错过了什么？

am4core.useTheme(am4themes_animated);

// Source data
var data = [
  {"date":"2019-07-05","domain":"aol.com","hits":"119489"},{"date":"2019-07-05","domain":"gmail.com","hits":"295834"},"domain":"hotmail.com","hits":"8000"},"domain":"yahoo.com","hits":"324263"},{"date":"2019-07-06","hits":"195042"},"hits":"258402"},"hits":"100000"},"hits":"427865"}
];

// Create chart instance
var chart = am4core.create("chartdiv",am4charts.XYChart);
//chart.dataSource.url = "data_1.PHP";

// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;
dateAxis.renderer.minGriddistance = 30;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

chart.colors.list = [
  am4core.color("red"),am4core.color("blue"),am4core.color("green")
];

// Create series
function createSeries(field,name,id) {
  var series = chart.series.push(new am4charts.Lineseries());
  series.datafields.valueY = "hits";
  series.datafields.dateX = "date";
  series.name = name;
  series.tooltipText = "{dateX}: [b]{valueY}[/]";
  series.strokeWidth = 2;
  
  var bullet = series.bullets.push(new am4charts.CircleBullet());
  bullet.circle.stroke = am4core.color("#fff");
  bullet.circle.strokeWidth = 2;

  // Add data pre-processor
  series.data = data;
  series.events.on("beforedatavalidated",function(ev) {
    var source = ev.target.data;
    var data = [];
    for(var i = 0; i < source.length; i++) {
      var row = source[i];
      if (row.domain == id) {
        data.push(row);
      }
    }
    ev.target.data = data;
  });
  
  return series;
}

createSeries("hits","Yahoo","yahoo.com");
createSeries("hits","Hotmail","hotmail.com");
createSeries("hits","Gmail","gmail.com");

chart.legend = new am4charts.Legend();
chart.cursor = new am4charts.XYCursor();

解决方法

dataSource 将数据分配到图表对象的 data 数组中，而不是像其余代码那样分配到系列中。您需要连接到数据源的 parseended 事件并使用现有的 beforedatavalidated 代码处理每个系列。您还需要跟踪 createSeries 方法中的 id 值，因为它在 parseended 事件中不可用：

chart.dataSource.events.on('parseended',function(ev){
  // process parsed data into each series' data array
  ev.target.component.series.each(function(series) {
    var source = ev.target.data;
    var data = [];
    for(var i = 0; i < source.length; i++) {
      var row = source[i];
      if (row.domain == series.id) {
        data.push(row);
      }
    }
    series.data = data;
  });
  // clear out data array so that it isn't re-assigned to the chart
  // data array
  ev.target.data = [];
});

// ...

function createSeries(field,name,id) {
  var series = chart.series.push(new am4charts.LineSeries());
  series.dataFields.valueY = "hits";
  series.dataFields.dateX = "date";
  series.id = id; //store id for later
  series.name = name;
  series.tooltipText = "{dateX}: [b]{valueY}[/]";
  series.strokeWidth = 2;
  
  var bullet = series.bullets.push(new am4charts.CircleBullet());
  bullet.circle.stroke = am4core.color("#fff");
  bullet.circle.strokeWidth = 2;

  return series;
}

Codepen