javascript - Highcharts Angular Chart 未从 renderer.button 事件中 redrwan

Question

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

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

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

Stackblitz

Answer 1

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

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

避免这种情况的方法之一是使用一些 bool '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和https://api.highcharts.com/class-reference/Highcharts.Series#update

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

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

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