javascript - Amcharts V4 如何在不重新加载整个图表的情况下更改数据？

Question

我想用新数据更新我的图表，而不需要像在 amcharts V3 中那样重新加载图表 here .

但我无法让它在 V4 中工作。我找到了一些关于如何执行此操作的链接，但从未在 V4 上找到过。 我创建了一个Pen数据基于 amCharts V3 的示例，但不起作用。

JS代码:

var globalVars = {unloaded:true};
var chart;
$(window).bind('beforeunload', function(){
    console.log("before unload");
    globalVars.unloaded = true;
});

$(document).ready(function() {
    getStatsByFlowByOperation();
});

function reloadData() {
    var newData = [
        {
            "OPERATION_NAME": "INIT",
            "NEW": 0,
            "READY": 2,
            "RUNNING": 0,
            "DONE": 0
        },
        {
            "OPERATION_NAME": "COPY",
            "NEW": 0,
            "READY": 2,
            "RUNNING": 2,
            "DONE": 2
        },
        {
            "OPERATION_NAME": "MERGE",
            "NEW": 0,
            "READY": 0,
            "RUNNING": 0,
            "DONE": 11
        }
    ];
    return newData;
}

function loadNewData() {
    var chartData = reloadData();
    chart.dataProvider = chartData;
    chart.validateData();
}

function getStatsByFlowByOperation(){

  am4core.useTheme(am4themes_material);
  chart = am4core.create("chartdiv", am4charts.XYChart);
  chart.hiddenState.properties.opacity = 0;

  var newData = [
    {
      "OPERATION_NAME": "INIT",
      "NEW": 2,
      "READY": 0,
      "RUNNING": 0,
      "DONE": 0
    },
    {
      "OPERATION_NAME": "COPY",
      "NEW": 2,
      "READY": 4,
      "RUNNING": 0,
      "DONE": 0
    },
    {
      "OPERATION_NAME": "MERGE",
      "NEW": 0,
      "READY": 0,
      "RUNNING": 5,
      "DONE": 6
    }
  ];

  chart.data = newData;

  chart.colors.step = 2;
  chart.padding(30, 30, 10, 30);
  chart.legend = new am4charts.Legend();

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

  var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
  valueAxis.renderer.inside = true;
  valueAxis.renderer.labels.template.disabled = true;
  valueAxis.min = 0;

  var listOfStatus = new Array();

  for(var obj in newData){
    if(newData.hasOwnProperty(obj)){
      for(var prop in newData[obj]){
        if(newData[obj].hasOwnProperty(prop)){
          if(prop == "NEW"
             || prop == "DISABLED"
             || prop == "SKIPPED"
             || prop == "READY"
             || prop == "DISPATCHED"
             || prop == "RUNNING"
             || prop == "ERROR_RESUMED"
             || prop == "ERROR"
             || prop == "FINISHED"
             || prop == "TIMEOUT"
             || prop == "RESUBMITTED"
             || prop == "CANCELLED"
             || prop == "DONE") {
            listOfStatus.push(prop);
          }
        }
      }
    }
  }

  var uniqueStatus = [];
  $.each(listOfStatus, function(i, el){
    if($.inArray(el, uniqueStatus) === -1) uniqueStatus.push(el);
  });

  var allStatus = [];
  allStatus.push("NEW");
  allStatus.push("DISABLED");
  allStatus.push("SKIPPED");
  allStatus.push("READY");
  allStatus.push("DISPATCHED");
  allStatus.push("RUNNING");
  allStatus.push("ERROR_RESUMED");
  allStatus.push("ERROR");
  allStatus.push("FINISHED");
  allStatus.push("TIMEOUT");
  allStatus.push("RESUBMITTED");
  allStatus.push("CANCELLED");
  allStatus.push("DONE");

  for(var i = 0; i < allStatus.length; i++) {
    if(uniqueStatus.includes(allStatus[i])) {
      createSeries(allStatus[i], allStatus[i]);
    }
  }
}

// Create series
function createSeries(field, name) {

  // Set up series
  var series = chart.series.push(new am4charts.ColumnSeries());
  series.name = name;
  series.dataFields.valueY = field;
  series.dataFields.categoryX = "OPERATION_NAME";
  series.sequencedInterpolation = true;

  // Make it stacked
  series.stacked = true;

  // Configure columns
  series.columns.template.width = am4core.percent(60);
  series.columns.template.tooltipText = "[bold]{name}[/]\n[font-size:14px]{categoryX}: {valueY}";

  // Add label
  var labelBullet = series.bullets.push(new am4charts.LabelBullet());
  labelBullet.label.text = "{valueY}";
  labelBullet.locationY = 0.5;

  return series;
}

HTML 代码:

<div id="chartdiv"></div>
<input type="button" value="Load new data" onclick="loadNewData();">

<!-- for graphes -->
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/material.js"></script>

你们有什么想法吗？非常感谢!

Answer 1

To update the chart with a whole new data set ，只需重新分配图表的数据，例如

function loadNewData() {
    chart.data = reloadData();
}

这是你的笔叉:

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