Googleの線図の視覚化グラフは更新時に消えますか？

Question

私はGoogleの視覚化の折れ線グラフを更新したいと考えています。私のコードは、this Stack Overflow postに触発されました。ここで

は、問題の私のコードです：

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

あなたが「クリック」というタイトルのボタンをクリックすると、チャートが突然消えていることがわかります。

---

UPDATE：私はこの行をコメントアウトすると 、それが働いているように見える：

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

そして折れ線グラフのために働くためには表示されません。折れ線グラフではうまくいかない理由は何ですか？

Answer 1

コード内にjQueryセレクタを使用するといくつかの問題があるようです。 document.getElementById(element) でadd('LineChart', 'mileage')

$(element)[0]で

• add('LineChart', '#mileage')：それはリフレッシュの両方を交換することで動作し、あなたは一般的に、私はここにjQueryのを避けたい$(element)と$(element)[0]などを呼んでいるセクションの周りにやや紛らわしいですここ

いくつかの一般的なアドバイス：あなたは

• チャートを再レンダリングする前にdivを消去する必要はありません（つまり、this.element.html('')に電話する必要はなく、単純に新しいデータテーブルを渡してに再呼び出しすると問題ありません）。この記事の必要性を潜在的に超えている間に、新しい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> 
  

お役に立てば幸いです。