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" />

请参阅示例笔：https://codepen.io/anon/pen/YdYJKy?editors=0011

Answer 1

您的答案正确无误：

该系列继承了图表中的数据，但显然以脚本结尾。

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

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

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

现在，该功能可以通过setTimeout或通过按钮同步或异步运行。

Answer 2

该系列继承了图表中的数据，但显然以脚本结尾。

因此chart.data可能具有{date: '2001-01-01', visits: 100, hits: 200, views: 300}，并且每个系列都可以仅指定要使用的数据元素。脚本结束后，显然不再适用，并且每个其他系列必须具有自己的数据。

为了使示例按预期工作，我注释了这一行：

// chart.data = generateChartData(); /* works with this line, but not needed */

并在每个系列中添加数据，如下所示：

var series = chart.series.push(new am4charts.LineSeries());
series.data = generateChartData(); // <---- new line here
series.dataFields.valueY = field;

更新笔：https://codepen.io/anon/pen/VqyVjr?editors=0011

我仍然不清楚为什么这个数据流不会继续，但是有一些起作用的原因。任何可以阐明原因的人，请这样做。

如何在amCharts v4中添加有关外部事件的系列？

2 个答案: