更新 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 数组即可。如果您要替换数组或向其添加数据，图表将自动更新：

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。

更新 am4charts.XYChart 数据

Update am4charts.XYChart data

html

javascript

amcharts

amcharts4