JQuery週期內的多個Google圖表

Question

我正在嘗試創建一個有兩個谷歌圖表的週期/滑塊。我可以使用下面的代碼在頁面上單獨顯示它們，但是當空間變得更高時，我決定去滑塊/循環。用下面的代碼。第一個圖表繪製，但第二個滾動到視圖中時。沒有圖表。它只說：無法在Chrome上獲取未定義或空引用的屬性「長度」：無法讀取null的屬性「長度」。我意識到，當一個圖表可見時，另一個不是。但是我對javascript的陌生感使得很難想出一個能夠顯示的答案：'block'在合適的時間顯示：'沒有。任何幫助將非常感激。

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 

     function drawCharts() { 
      var data1 = google.visualization.arrayToDataTable(<% =jsostring%>); 
      var options1 = { 
       title: 'PSNL Weight Chart', 
       backgroundColor: {fill:'none'} 
      }; 

      var data2 = google.visualization.arrayToDataTable(<% =jsostring2%>); 
      var options2 = { 
       title: 'PSNL Sleep Chart', 
       backgroundColor: {fill:'none'} 
      }; 

      var chartA = new google.visualization.LineChart(document.getElementById('chart_div')); 
      chartA.draw(data1, options1); 

      var chartB = new google.visualization.ColumnChart(document.getElementById('chart_div2')); 
      chartB.draw(data2, options2); 

     } 
     google.setOnLoadCallback(drawCharts); 
     google.load("visualization", "1", { packages: ["corechart"] }); 

     </script> 

Answer 1

我想答案是非常基本的。我不是一個Java人。我搜索了一下，並考慮了一下。我在另一個網站上找到的答案是：

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 

     function drawCharts() { 
      var data1 = google.visualization.arrayToDataTable(<% = jsostring%>); 
      var options1 = { 
       title: 'PSNL Weight Chart', 
       backgroundColor: {fill:'none'} 
      }; 

      var data2 = google.visualization.arrayToDataTable(<% = jsostring2%>); 
      var options2 = { 
       title: 'PSNL Sleep Chart', 
       backgroundColor: {fill:'none'} 
      }; 

      var chartA = new google.visualization.LineChart(document.getElementById('chart_div')); 
      document.getElementById('chart_div').style.display = 'block'; 
      document.getElementById('chart_div2').style.display = 'none'; 
      chartA.draw(data1, options1); 

      var chartB = new google.visualization.ColumnChart(document.getElementById('chart_div2')); 
      document.getElementById('chart_div2').style.display = 'block'; 
      document.getElementById('chart_div').style.display = 'none'; 
      chartB.draw(data2, options2); 
     } 
     google.setOnLoadCallback(drawCharts); 
     google.load("visualization", "1", { packages: ["corechart"] }); 

</script> 

隨着jquery的滾動通過。它會打開第一個Div_Chart並關閉另一個，然後滾動到視圖中。