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

我遇到的问题是，即使我正在更新系列数据，该图表也似乎从未更新过。（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)
  }
}

Answer 1

通常来说，对于在这里冲浪的下一个人：在您的HTML元素中，您将拥有类似的内容：

<highcharts-chart
...
[(update)]="updateFlag">
</highcharts-chart>

在相应的Typescript文件中，您有一个

updateFlag = false;

在更改了部分之后，您可以执行以下操作：

this.updateFlag = true;

高图。有角度的。在事件点击上使用新系列重新绘制图表

1 个答案: