在 am4charts.XYChart 中加载数据数组答案

【问题标题】：Load array of data in am4charts.XYChart在 am4charts.XYChart 中加载数据数组
【发布时间】：2020-04-18 22:36:28
【问题描述】：

我是 AmCharts 的新手，尝试将 JSON 数据从数组加载到图表中并获取排序数据，图表未加载，这就是我正在做的，我有这个错误图表未处理 id-191 如何我可以纠正这个吗？谢谢。

HTML

<div id="Fourdiv">

Javascript

window.addEventListener("load", genFunction());

function genFunction() {
 var x2;
 var jsonx;
 var x = [];
 var ref = firebase.database().ref("Chartdata");
  ref.on('value', function (snapshot) {
   snapshot.forEach(function (childSnapshot) {
     var childKey = childSnapshot.key;
     x2 = childSnapshot.val();
     jsonx = JSON.stringify(x2);
     x.push(jsonx);

    });
 });

  am4core.ready(function () {
  // Themes begin
  am4core.useTheme(am4themes_animated);
  // Themes end

  // Create chart instance
     var chart = am4core.create("Fourdiv", am4charts.XYChart);
       for (i = 0; i < x.length; i++) {
         chart.x.push({ "x": x[i].x, "y": x[i].y });
       }
  // Add data
    chart.data = x;
  // Create axes

    var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
    categoryAxis.dataFields.category = "x";
    categoryAxis.renderer.grid.template.location = 0;
    categoryAxis.renderer.minGridDistance = 30;

    categoryAxis.renderer.labels.template.adapter.add("dy", function (dy, target) {
     if (target.dataItem && target.dataItem.index & 2 == 2) {
        return dy + 25;
    }
    return dy;
  });

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

 // Create series
    var series = chart.series.push(new am4charts.ColumnSeries());
    series.dataFields.valueY = "y";
    series.dataFields.categoryX = "x";
//series.name = "Visits";
    series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
    series.columns.template.fillOpacity = .8;

   var columnTemplate = series.columns.template;
   columnTemplate.strokeWidth = 1;
   columnTemplate.strokeOpacity = 1;

  });// end am4core.ready()
}

【问题讨论】：

标签： javascript html amcharts amcharts4

【解决方案1】：

am4core.ready 与window.addEventListener("load", ...) 相同。如果您已经在使用自己的 onload 处理程序，则不需要它。

您还错误地设置了事件侦听器 - 您需要传入函数引用（不带括号）：

window.addEventListener("load", genFunction);

还请注意，您应该将数据分配给图表实例之外的临时变量，而不是使用 chart.x（您以后甚至不会使用）：

var data = [];
for (i = 0; i < x.length; i++) {
  data.push({ "x": x[i].x, "y": x[i].y });
}
chart.data = data;

【讨论】：