如何使 Amcharts animateData 工作？

Question

我需要创建每分钟实时值图表，它的最后一个柱值在添加后增加一分钟，一分钟后添加值为 1 的新柱，第一个柱（最旧的）是已删除。

我需要像下面的示例一样对所有这些更改进行动画处理。

var chart = AmCharts.makeChart("chartdiv", {
 "type": "serial",
 "theme": "light",
 "dataProvider": generateChartData(),
 "graphs": [{
  "valueField": "value",
  "type": "column",
    "fillAlphas": 1,
  "alphaField": "alpha1"
 }, {
  "valueField": "value2",
    "fillAlphas": 1,
  "type": "column",
  "alphaField": "alpha2"
 }],
 "valueAxes": [{
  "minimum": 0,
  "maximum": 400
 }],
 "chartCursor": {},
 "categoryAxis": {
  "parseDates": true,
  "minPeriod": "mm"
 },
 "zoomOutOnDataUpdate": false,
 "categoryField": "date"
});


function generateChartData() {
 var chartData = [];
 var firstDate = new Date( 2012, 0, 1 );
 firstDate.setDate( firstDate.getDate() - 1000 );
 firstDate.setHours( 0, Math.floor(Math.random() * 10), 0, 0 );

 for ( var i = 0; i < 10; i++ ) {
  var newDate = new Date( firstDate );
  newDate.setHours( 0, i, 0, 0 );

  var a = Math.round( Math.random() * ( 200 + i ) ) + 100 + i;
  var b = Math.round( Math.random() * ( 200 + i ) ) + 100 + i;

    chartData.push( {
      date: newDate,
      value: a,
      value2: b,
      alpha1: (Math.random() < 0.5 ? 0 : 1),
      alpha2: (Math.random() < 0.5 ? 0 : 1)
    } );
 }

 return chartData;
}


function loop() {
 var data = generateChartData();

 chart.animateData(data, {
  duration: 1000,
  complete: function () {
   setTimeout(loop, 2000);
  }
 });
}

chart.addListener("init", function () {
 setTimeout(loop, 1000);
});

html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
}

#chartdiv {
 width: 100%;
 height: 100%;
}

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/animate/animate.min.js"></script>

<div id="chartdiv"></div>

我设置了带条形图的代码笔及其数据更新here。我在示例中使用 animateData() 方法，但没有动画应用于图表。我做错了什么？

Answer 1

数据需要是一个全新的数组才能使动画正常工作，如您链接的示例中所示。您需要克隆修改后的数组并将其传递给 animateData 方法。这是一个使用 lodash 的 cloneDeep method

的例子

  chart.animateData(_.cloneDeep(data), {
    duration: 1000,
    complete: () => setTimeout(updateChartData, 500),
  });

Updated codepen

如何使 Amcharts animateData 工作？

How to make Amcharts animateData working?

javascript

amcharts