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

Question

我希望能够更新谷歌可视化的折线图。我的代码灵感来自this Stack Overflow post。

这里是我的代码有问题：

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

你会看到，当你点击标题按钮“点击”，图表突然消失。

---

UPDATE： 当我注释掉这一行，这似乎是工作：

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

而且它不会出现在折线图工作。任何想法为什么它不适用于折线图？

Answer 1

似乎有几个问题围绕代码中的jQuery选择器的用法;它的栏目周围有些混乱，你要调用$(element)和$(element)[0]等等。一般我会避免的jQuery这里，刷新工作通过更换两个：与document.getElementById(element)

• add('LineChart', '#mileage')与add('LineChart', 'mileage')
• $(element)[0]

一些一般性的建议在这里：

• 你做在重新绘制图表之前不需要清除div（即：不需要调用this.element.html('')，简单地通过新数据表并重新调用.draw(newDataTable, opts)就可以了。虽然潜在的超出了这篇文章的需求，但新的gviz animation functionality就是一个很好的例子（你只需要用更新后的数据调用重绘，而图形就能改变这个变化）。

• 显然，我并不知道你的实现的完整需求，但是我觉得你的代码可能比你需要的稍微多一些。根据从服务器发送数据的方式，您可以轻松地重新加载图表。我已经给了一些细节in this question，但在短暂的它看起来像这样：

  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 
  <div id='vis'></div> 
  <input type='button' onclick='makeAjaxCall()'>Go</input> 
  

希望有所帮助。