Google linechart 시각화 차트가 업데이트되면 사라 집니까?

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')과 : 당신은 일반적으로 등 $(element) 및 $(element)[0]를 호출하고 여기 jQuery를 방지 할 위치는 부분의 주위에 다소 혼란, 새로 고침은 모두 교체하여 작동 여기

어떤 일반적인 조언 : 당신이 할

• 차트를 다시 렌더링하기 전에 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> 
  

희망을.