0

在图表中，有 2 个自定义按钮用于更新系列以按百分比 (%) 或按计数重绘图表（视图切换）。在的回调函数中renderer.button，当我单击计数按钮时，我通过更改数据对象中 y 的值并使用修改后的系列数据调用chart.update()方法来更新系列数据

const seriesData: any = this.data;
this.update(seriesData, true);
this.redraw();

图表不会自动重绘，仅当我放大或缩小浏览器或任何其他操作时才会重绘。这里缺少什么。

在此处输入图像描述

堆栈闪电战

4

1 回答 1

1

您正在努力解决的问题是在渲染函数中调用更新方法会创建一个无限循环。

渲染调用更新 -> 更新重绘图表 -> 渲染再次调用 -> 渲染调用更新 -> ...

避免这种情况的方法之一是使用一些布尔“标志”来控制更新将被调用一次。

使用console.log的简单演示来测试流程：https ://jsfiddle.net/BlackLabel/acoxmhdw/ 

let chartForUpdate = true;

Highcharts.chart('container', {

  chart: {
    events: {
      render() {
        let chart = this;
                console.log('test redraw call 1')
        if (chartForUpdate) {
          chartForUpdate = false;
          chart.series[0].update({
            data: [5, 10]
          })
          console.log('test condition IF call')
        }
        console.log('test redraw call 2')
                chartForUpdate = true
      }
    }
  },

  series: [{
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
  }]
});

编辑

我犯了一个错误，我深表歉意 - 最大调用堆栈不是因为渲染调用的无限循环，而是来自您尝试粘贴的数据。

更新的数据必须采用 Highcharts 要求的格式 -这是一个系列配置对象，其数据为对象数组或值数组或数组数组- 文档：https ://www.highcharts.com/docs/chart-概念/系列和https://api.highcharts.com/class-reference/Highcharts.Series#update

同时，在您的演示中，数据对象的数组正在传递给更新函数，这会产生错误。

我不确定触发此按钮后要显示哪些值，但您需要为其创建一个新的系列对象。像这样的东西：

https://stackblitz.com/edit/angular-9nkrgd-aykarp?file=src/app/app.component.ts

于 2020-04-06T14:27:41.600 回答