Highcharts Angular 图表未从 renderer.button 事件中恢复

Question

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

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

图表不会自动重新绘制它只有在我放大或缩小浏览器或任何其他操作时才会重新绘制。这里缺少的部分是什么。

Stackblitz

Answer 1

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

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

避免这种情况的方法之一是使用一些布尔值 'flags' 来控制更新将被调用一次。

使用 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-concepts/series and https://api.highcharts.com/class-reference/Highcharts.Series#update

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

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

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

Highcharts Angular 图表未从 renderer.button 事件中恢复

Highcharts Angular Chart not redrwan from renderer.button event

javascript

highcharts

angular

angular-highcharts