重绘Google图表而不刷新页面

Question

如果 api 有新数据，我有一个刷新页面数据的按钮。它能够刷新我的数据表，但不能重新绘制谷歌图表。我使用这个模块将谷歌图表集成到我的项目Ng2GoogleCharts。

您知道重新绘制图表或删除该图表并重新创建的任何可能方法吗？

这就是我在 html 页面上创建图表的方式；

<google-chart [data]="mixChartData" #chart></google-chart>

我在 .ts 文件上声明 mixChartData ；

this.mixChartData={
      chartType: 'LineChart',
      dataTable: this.mixChart,
      options: this.mixOptions
    }

Answer 1

要强制重绘，在

GoogleChartInterface

上（在您的情况下是

this.mixChartData

）有一个

component

属性，它有一个

draw()

方法

this.mixChartData.component.draw();

您也可以传递数据来重绘

this.mixChartData.component.draw(this.mixChartData);

Answer 2

当我尝试上述逻辑时，我得到

    @ViewChild('mychart ', {static: false}) mychart;
    ...
    this.mychart.draw()

ERROR TypeError: this.mychart.draw is not a function

Answer 3

我已经为这个问题苦苦挣扎了好几天，这是上述解决方案的详细版本：

在您的 HTML 中：

   <google-chart #mychart [data]="toDoChart"></google-chart>

在组件中

  @ViewChild('mychart ', {static: false}) mychart;

然后根据您的逻辑在要执行图表更新的位置插入以下代码：

 updateToDoChart(){    
   this.mychart.draw();
 }