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

Question

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"},{"date":"2019-07-05","domain":"hotmail.com","hits":"8000"},{"date":"2019-07-05","domain":"yahoo.com","hits":"324263"},{"date":"2019-07-06","domain":"aol.com","hits":"195042"},{"date":"2019-07-06","domain":"gmail.com","hits":"258402"},{"date":"2019-07-06","domain":"hotmail.com","hits":"100000"},{"date":"2019-07-06","domain":"yahoo.com","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;

Answer 1

dataSource将数据分配到data图表对象的数组中，而不是像代码的其余部分那样分配到系列中。您需要挂钩数据源的parseended事件并使用现有beforedatavalidated代码处理每个系列。您还需要跟踪idcreateSeries 方法中的值，因为它在事件中不可用parseended：chart.dataSource.events.on('parseended', function(ev){&nbsp; // process parsed data into each series' data array&nbsp; ev.target.component.series.each(function(series) {&nbsp; &nbsp; var source = ev.target.data;&nbsp; &nbsp; var data = [];&nbsp; &nbsp; for(var i = 0; i < source.length; i++) {&nbsp; &nbsp; &nbsp; var row = source[i];&nbsp; &nbsp; &nbsp; if (row.domain == series.id) {&nbsp; &nbsp; &nbsp; &nbsp; data.push(row);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; series.data = data;&nbsp; });&nbsp; // clear out data array so that it isn't re-assigned to the chart&nbsp; // data array&nbsp; ev.target.data = [];});// ...function createSeries(field, name, id) {&nbsp; var series = chart.series.push(new am4charts.LineSeries());&nbsp; series.dataFields.valueY = "hits";&nbsp; series.dataFields.dateX = "date";&nbsp; series.id = id; //store id for later&nbsp; series.name = name;&nbsp; series.tooltipText = "{dateX}: [b]{valueY}[/]";&nbsp; series.strokeWidth = 2;&nbsp;&nbsp;&nbsp; var bullet = series.bullets.push(new am4charts.CircleBullet());&nbsp; bullet.circle.stroke = am4core.color("#fff");&nbsp; bullet.circle.strokeWidth = 2;&nbsp; return series;}代码笔