Highcharts.Угловой.Перерисовать диаграмму с новой серией при клике по событию

Question

вид застрял в дыре здесь.У меня есть накопленная Highchart, которую я пытаюсь сделать заново, когда вы нажимаете на кнопку.Вот как это выглядит сейчас:

Нажатие на любую из кнопок вызовет назначенный обработчик событий, который поможет мне сгенерировать новую сериюданные для этой конкретной категории.Данные организованы таким образом, что могут потреблять гистограммы.

Например, нажатие кнопки «Класс актива» вернет результат:

(4) [{…}, {…}, {…}, {…}]
0: {name: "Cash", data: Array(1)}
1: {name: "Equity", data: Array(1)}
2: {name: "Fixed Income", data: Array(1)}
3: {name: "Fund", data: Array(1)}
length: 4

Проблема I 'Мне кажется, что диаграмма никогда не обновляется, хотя я обновляю данные серии.(this.chart.options.series = myNewSeries)

Некоторые события возвращают более 4 элементов (может быть от 4 до 30 значений), и мне также необходимо, чтобы они складывались.

Вот мой код с логикой обновления внизу:

export class ChartComponent{
    constructor(){
        || block of script logic ||
        this.options = {
          chart: {
            type: 'column',
            height: 500,
            width: 500,
            style: {
              fontFamily: "Arial"
            },
            events: {
              redraw: function (){
                alert("The chart is being redrawn")
              }
            }
          },
          title: {
            text: ""
          },
          xAxis: {
            categories: this.seriesData.category,
            labels: {
              style: {
                fontSize: "14px"
              }
            }
          },
          yAxis: {
            min: 0,
            title: {
              text: ""
            },
            labels: {
              formatter: function () {
                let valueString = (
                  this.value > 999.99 && this.value <= 999999.99 ?
                    "$" + (this.value / 1000).toFixed(0) + "K" : this.value > 999999.99 ?
                      "$" + (this.value / 1000000).toFixed(1) + "M" : this.value
                )
                return valueString
              },
              style: {
                fontSize: "14px",
              }
            }

          },
          legend: {
            x: 0,
            y: 0,
            verticalAlign: "top",
            align: "right",
            layout: "vertical",
            itemStyle: {
              fontSize: "16px",
              color: "#6c6c6c",
            },
            symbolPadding: 8,
            itemMarginTop: 10,
            shadow: false,
            labelFormatter: function () {
              return `${this.name}`
            }
          },
          tooltip: {
            formatter: function () {
              let name = this.series.name
              let value = this.y
              let valueString = `$${value.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}`
              let total = this.point.stackTotal
              let percentage = ((value / total) * 100).toFixed(2)
              let percentageString = `(${percentage})%`

              return `<b>${name}</b> <br> ${valueString} ${percentageString}`
            },
            style: {
              fontSize: "14px",
            },
            backgroundColor: "#ffffff"
          },
          plotOptions: {
            column: {
              stacking: 'normal',
              dataLabels: {
                enabled: false
              }
            },
            series: {
              pointWidth: 100,
              borderColor: "rgba(0, 0, 0, 0)"
            }
          },
          series: this.seriesData.series
        }
    }
    options: Object

  saveInstance(chartInstance): void {
     this.chart = chartInstance;
  }

  updateSeriesData = (data: Array<any>, title): void => {
    this.chart.options.series = data
    this.chart.xAxis[0].update({categories: title})
  }

  // event handlers
  getIndustryData = (e) => {
    let newSeries = this.getSeriesTotals("Industry", "SecuritySectorLevel1", "SecuritySectorLevel2")
    this.updateSeriesData([...newSeries.series], newSeries.category)
  }
  getSectorData = (e) => {
    let newSeries = this.getSeriesTotals("Sector", "SecuritySectorLevel2", "SecuritySectorLevel1")
    this.updateSeriesData([...newSeries.series], newSeries.category)
  }
  getAssetClassData = (e) =>{
    let newSeries = this.getSeriesTotals("Asset Class", "AssetClassLevel1", "SecuritySectorLevel1")
    this.updateSeriesData([...newSeries.series], newSeries.category)
  }
  getRegionData = (e) => {
    let newSeries = this.getSeriesTotals("Region", "CountryOfRisk", "CountryOfIssuance")
    this.updateSeriesData([...newSeries.series], newSeries.category)
  }
  getCurrencyData = (e) =>{
    let newSeries = this.getSeriesTotals("Currency", "LocalCCY", "LocalCCYDescription")
    this.updateSeriesData([...newSeries.series], newSeries.category)
  }
}