javascript - 更新 am4charts.XYChart 数据

Question

我试图用 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

Answer 1

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

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

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

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

理想情况下，您希望在 am4core.ready 外部访问图表变量，因此在函数外部创建变量并在 Ready 函数内部分配它可能是您最好的选择:

var chart;

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

//update chart using global variable

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