Javascript 切换到AMSharts中的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行。相反，它是一条线，每个日期都有多个堆叠点

我猜是在前置处理器里。我的印象是，当您从外部数据（如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;

  // 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();

am4core.useTheme（am4themes\u动画）；
//源数据
风险值数据=[
{“日期”：“2019-07-05”，“域名”：“aol.com”，“点击次数”：“119489”}，{“日期”：“2019-07-05”，“域名”：“gmail.com”，“点击次数”：“295834”}，{“日期”：“2019-07-05”，“域名”：“hotmail.com”，“点击次数”：“8000”}，{“日期”：“2019-07-05”，“域名”：“yahoo.com”，“点击次数”：“324263”}，{“日期”：“2019-07-06”，“域名”：“aol.com”，“点击次数”：“195042”}，{“日期”：“2019-07-07-06”，“点击次数”：“gmail.com”，“点击次数”：“258402”}，{“日期”：“2019-07-06”，“域名”：“hotmail.com”，“点击次数”：“100000”}，{“日期”：“2019-07-06”，“域名”：“yahoo.com”，“点击次数”：“427865”}
];
//创建图表实例
var chart=am4core.create（“chartdiv”，am4charts.XYChart）；
//chart.dataSource.url=“data_1.php”；
//创建轴
var dateAxis=chart.xAxes.push（新的am4charts.dateAxis（））；
dateAxis.renderer.grid.template.location=0；
dateAxis.renderer.minGridDistance=30；
var valueAxis=chart.yAxes.push（新的am4charts.valueAxis（））；
chart.colors.list=[
AM4核心颜色（“红色”），
AM4核心颜色（“蓝色”），
AM4核心颜色（“绿色”）
];
//创建系列
函数createSeries（字段、名称、id）{
var series=chart.series.push（新的am4charts.LineSeries（））；
series.dataFields.valueY=“点击”；
series.dataFields.dateX=“日期”；
series.name=名称；
series.tooltipText=“{dateX}:[b]{valueY}[/]”；
系列。冲程宽度=2；
var bullet=series.bullets.push（新的am4charts.CircleBullet（））；
bullet.circle.stroke=am4core.color（“#fff”）；
bullet.circle.strokeWidth=2；
//添加数据预处理器
series.data=数据；
series.events.on（“beforedatavalidated”，函数（ev）{
var source=ev.target.data；
var数据=[]；
对于（变量i=0；i

数据源

将数据分配到图表对象的

数据

数组中，而不是像其他代码那样分配到序列中。您需要连接到数据源的

parseend

事件，并使用现有的

beforedatavalidated

代码处理每个系列。您还需要跟踪createSeries方法中的

id

值，因为它在

parseend

事件中不可用：

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;
}

chart.dataSource.events.on（'parseended'，function（ev）{
//将解析的数据处理到每个系列的数据数组中
电动汽车目标组件系列各功能（系列）{
var source=ev.target.data；
var数据=[]；
对于（变量i=0；i

---

是的，我想不出来，所以非常感谢。出于某种原因，在我这方面，图表光标不工作，即使它在使用相同代码的笔中工作……但只是一个小问题。你的回答解决了我最初的问题。