0

我正在尝试在数据更改后在 UI 中显示更新后的 Tree Map，但即使在调用 draw 方法后 Tree Map 似乎也没有使用最新信息进行更新。

以下是我每次在数据更改后调用的 drawChart 方法。

drawChart = () => {
const data = google.visualization.arrayToDataTable(this.datatable);

const options = {
  title: 'Pairwise Nodes',
  legend: {position: 'top'},
  animation: {
    duration: 1000,
    easing: 'out',
  },
  enableHighlight: true,
  headerHeight: 35,
  showScale: true,
  is3D: true,
  minColor: '#f00',
  midColor: '#ea4747',
  maxColor: '#53e053',
  fontColor: 'black',

};

const chart = new google.visualization.TreeMap(this.treemap.nativeElement);

chart.draw(data, options);
}

谷歌图表加载 AfterViewInit：

ngAfterViewInit() {
google.charts.load('current', {'packages': ['treemap']});
google.charts.setOnLoadCallback(this.drawChart);
}

声明的属性：

 @ViewChild('treemap') treemap: ElementRef;
 datatable = [];

html:

<div #treemap style="width: 100vw; height: 100vh;"></div>

登陆页面上的树形图： 在此处输入图像描述

更改数据后的TreeMap： 在此处输入图像描述

Github 代码链接

4

0 回答 0