更新 am4charts.XYChart 数据答案

【问题标题】：Update am4charts.XYChart data更新 am4charts.XYChart 数据
【发布时间】：2019-08-29 12:45:34
【问题描述】：

我正在尝试使用 javascript 更新 am4charts.XYChart 的数据，但我不能

我尝试再次执行 am4core.create("chartdiv", am4charts.XYChart);但我有一个警告这样做。

这是我在 HTML 代码中的图表

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

这就是我初始化图表的方式

 am4core.ready(function () {

// Themes begin
        am4core.useTheme(am4themes_animated);
// Themes end

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

        var data = [];

        for (var i = 0; i < jsonArray.length; i++) {
            var newdate = new Date(jsonArray[i].timestamp);

            data.push({date: newdate, value: jsonArray[i].columna_cierre});
        }

        chart.data = data;

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

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

// Create series
        var series = chart.series.push(new am4charts.LineSeries());
        series.dataFields.valueY = "value";
        series.dataFields.dateX = "date";
        series.tooltipText = "{value}"

        series.tooltip.pointerOrientation = "vertical";

        chart.cursor = new am4charts.XYCursor();
        chart.cursor.snapToSeries = series;
        chart.cursor.xAxis = dateAxis;

//chart.scrollbarY = new am4core.Scrollbar();
        chart.scrollbarX = new am4core.Scrollbar();

    });

我想要一个函数来更新图表上的值和轴。当我再次执行 am4core.create("chartdiv", am4charts.XYChart);我有这个错误图表未处理 id-22

【问题讨论】：

标签： javascript html amcharts amcharts4

【解决方案1】：

am4core.create 用于创建图表，而不是更新，这就是为什么在同一个 div 上再次调用它时会出错的原因。库告诉您首先使用dispose 方法删除旧图表。

如果要更新图表数据，无需再次调用create，只需更新图表的data 数组即可。如果您要替换数组或向其中添加数据，图表将自动更新：

chart.data = /* new array */
// or using addData
chart.addData([/* each element you want to add */])

如果您正在修改数据，请在进行更改后调用图表的invalidateData 或invalidateRawData 方法，例如chart.invalidateData()

理想情况下，您希望图表变量可以在 am4core.ready 之外访问，因此在函数之外创建变量并在准备好的函数中分配它可能是您最好的选择：

var chart;

am4core.ready(function() {
  // ...
  chart = am4core.create(...); //assign to global variable
  // ...
}));

//update chart using global variable

您可以找到有关如何更新图表here 的更多信息。

【讨论】：