javascript - HIghcharts使用vue composition api重绘packedbubble

Question

我试图弄清楚如何在道具更改而没有任何好的结果时重新渲染打包气泡图......在尝试进行“重绘”之前，返回图表工作正常，不更新道具更改，而是绘制最少的东西。

到目前为止，我有以下代码：

<template>
  <div id="thechart"></div>
</template>

export default {
  name: 'OrgChart',
  props: {
    chartData: { ... }
  },
  setup (props) {
    //...
    
    const employeeSeries = []
    const keys = Object.keys(props.chartData)
    keys.forEach((key, index) => {
      employeeSeries.push({
       name: key,
       data: props.chartData[key]
      })
    })

    watch(() => props.chartData, (selection, prevSelection) => {
      redraw()
    })

    function redraw () {
      chart.value.series.setData(employeeSeries, true)
    }

    onMounted(() => {
      var highchartsOptions = {
        chart: {
          type: 'packedbubble',
          height: '50%',
          renderTo: 'thechart'
        },
        //...,
        series: employeeSeries
      }
      chart.value = new HighCharts.chart(highchartsOptions)
    })
    return {
      chart
    }
  }
}
</script>

任何想法？谢谢。

标签： javascriptvue.jshighchartsvue-composition-api