Google线图可视化图表在更新时会消失吗？

我希望能够更新谷歌可视化的折线图。 我的代码受到Stack Overflowpost的启发。

这是我的代码：

http://jsfiddle.net/YCqyG/5/

您会看到当您单击标题为“单击”的按钮时，图表会突然消失。

---

更新：当我注释掉这一行时，它似乎正在工作：

// this.element.html(''); 

它似乎不适用于折线图。 知道为什么它不适用于折线图吗？

Answer 1

在代码中使用jQuery选择器似乎存在一些问题; 你在调用$(element)和$(element)[0]等部分时有些混乱。一般来说，我在这里避免使用jQuery，刷新通过替换以下两个来实现：

• 使用add('LineChart', 'mileage') add('LineChart', '#mileage') add('LineChart', 'mileage')
• $(element)[0] with document.getElementById(element)

一些一般建议：

• 在重新渲染图表之前，您不需要清除div（即：无需调用this.element.html('') ，简单地传入新数据表并重新调用.draw(newDataTable, opts)虽然可能超出了这篇文章的需要，但新的gviz动画function就是一个很好的例子（你只需要用更新的数据调用redraw，图表就可以设置更改动画）。

• 显然我并不知道你的实现的全部需要，但我觉得你的代码可能比你需要的更多。 根据您从服务器发送数据的方式，您可以非常轻松地重新加载图表。 我在这个问题上给出了一些细节，但简而言之它看起来像这样：

   function drawMyChart(dataTable) { // convert your dataTable to the right format // options here include loading from arrays, json representations of your datatable // or something more manual perhaps var opts = {height:50, width:50}; var chart = new google.visualization.LineChart(document.getElementById('vis')); chart.draw(dataTable, opts); } function makeAjaxCall() { $.ajax({ url: '/path/to/data/json', sucess: drawMyChart(a), dataType: 'json' // this is important, have it interpreted as json }); } // html somewhere 
   Go 

希望有所帮助。