javascript - 如何在 amCharts v4 中添加外部事件系列？

Question

我有一个简单的 amCharts v4 图表，其中包含添加一些系列和轴的功能。

如果我从脚本中调用该函数，图表会正确显示，但如果通过按钮单击或超时从外部调用，则图例会显示，但系列和坐标轴不会显示。如果以后添加系列，是否需要做一些额外的事情？

var chart = am4core.create("chartdiv", am4charts.XYChart);

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

// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.minGridDistance = 50;

// Create series
function createAxisAndSeries(field, name, opposite, bullet) {
  var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
  var series = chart.series.push(new am4charts.LineSeries());
  series.dataFields.valueY = field;
  series.dataFields.dateX = "date";
  series.strokeWidth = 2;
  series.yAxis = valueAxis;
  series.name = name;
  series.tooltipText = "{name}: [bold]{valueY}[/]";
  var interfaceColors = new am4core.InterfaceColorSet();
}

var axisAndSeriesList = [];
function addAxisAndSeries(name) {
  if (name==="Visits") {
    createAxisAndSeries("visits", "Visits", false, "circle");  
  } else if (name==="Views") {
    createAxisAndSeries("views", "Views", true, "triangle");
  } else if (name==="Hits") {
    createAxisAndSeries("hits", "Hits", true, "rectangle");
  } else {
    console.warn('what is ' + name +'?');
  }
}

// generate some random data, quite different range
function generateChartData() {
  var chartData = [];
  var firstDate = new Date();
  firstDate.setDate(firstDate.getDate() - 100);
  firstDate.setHours(0, 0, 0, 0);

  var visits = 1600;
  var hits = 2900;
  var views = 8700;

  for (var i = 0; i < 15; i++) {
    var newDate = new Date(firstDate);
    newDate.setDate(newDate.getDate() + i);

    visits += Math.round((Math.random()<0.5?1:-1)*Math.random()*10);
    hits += Math.round((Math.random()<0.5?1:-1)*Math.random()*10);
    views += Math.round((Math.random()<0.5?1:-1)*Math.random()*10);

    chartData.push({date: newDate, visits: visits, hits: hits, views: views });
  }
  return chartData;
}

function addSeries() {
  console.log('Add all 3 in the series');
  addAxisAndSeries("Visits");
  addAxisAndSeries("Views");
  addAxisAndSeries("Hits");
}

// These work
// addAxisAndSeries("Visits");
// addAxisAndSeries("Views");
// addAxisAndSeries("Hits");

// This works
// addSeries();  

// This does not work
// setTimeout(function(){
//   addSeries();
// }, 3000);

// Clicking on "Add series" button does not work (from HTML)
// <input type="button" onclick="addSeries()" value="Add series" />

查看 sample 笔:https://codepen.io/anon/pen/YdYJKy?editors=0011

Answer 1

您的回答是正确的:

The series inherit data from the chart, but apparently that ends with the script.

如您所见，当adding a series dynamically , 基本上图表不会假设异步添加的系列是有自己的数据还是会使用图表的数据。要让图表继续向新添加的系列提供数据，请运行 chart.invalidateData();。

这是您的演示的分支，将其添加到 addSeries() 函数中:

https://codepen.io/team/amcharts/pen/bb863c597a46895f87d2b67534c353f6

现在，无论是通过 setTimeout 还是通过按钮，该函数都可以同步或异步地工作。