chartOptions.redraw在使用角度的高图中不是函数 [英] chartOptions.redraw is not a function in highcharts using angular

问题描述

这是html代码

<highcharts-chart
  *ngIf="!isLoading"
  [Highcharts]="Highcharts"
  [options]="chartOptions"
  [(update)]="updateChart"
  style="width: 100%; height: 100%; display: block;"
></highcharts-chart>

在此处输入代码

This is the typescriptcode


 onTogglevolume() {
    this.chartOptions.series[2].visible = !this.chartOptions.series[2].visible;

    this.chartOptions = {
      ...this.chartOptions
    };
    this.chartOptions.redraw();

  }

These are import statements

import * as Highcharts from 'highcharts';
import { Options } from "highcharts";
import StockModule from 'highcharts/modules/stock';
StockModule(Highcharts);

推荐答案

load事件仅在乞讨时触发一次，因此它不是进行更多动态更改的理想场所.与此相反，我建议使用其他事件.我猜您将在更改时间范围后计算每列的颜色.在这种情况下，您应该像在演示中一样使用例如 afterSetExtremes 事件.我还创建了一个名为 colorVolume 的单独方法.在使用图表参考的内部，我使用了点更新方法来更改第一列的颜色.

The load event is only fired once at the begging so it's not the perfect place for more dynamic changes. Instead of this, I suggest using some other event. I guess you are going to calculate the colour of each column after changing the time range. In this case, you should use for example the afterSetExtremes events as I did it in the demo. I also have created a separate method called colorVolume. Inside using the chart reference I used the point update method to change the first column colour.

演示:
https://stackblitz.com/edit/highcharts-angular-basic-line-fvtyrx
API:
https://api.highcharts.com/highcharts/xAxis.events.afterSetExtremes
https://api.highcharts.com/class-reference/Highcharts.Point#更新

Demo:
https://stackblitz.com/edit/highcharts-angular-basic-line-fvtyrx
API:
https://api.highcharts.com/highcharts/xAxis.events.afterSetExtremes
https://api.highcharts.com/class-reference/Highcharts.Point#update

这篇关于chartOptions.redraw在使用角度的高图中不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！