使用java腳本來選擇Google圖表數據來更改數據系列

Question

我花了很多時間查看如何使用java腳本來修改饋送到我的Google圖表折線圖中的一系列特定數據，我試圖修改的數據是通過PHP從MySQL表中獲取的，然後轉換成Json以將其饋送到圖表的Java腳本中。

這些數據是由不同公司銷售的產品的價格比較，一些公司不銷售某些產品並輸入0表示他們不銷售該產品。我需要能夠隱藏0，並在排行榜將它們連接到我的其他數據線，所以我們沒有得到的結果是這樣的：

example chart

我想沿着隱藏數據行圖表底部以及在最後日期列中降至零的2個數據點。

我看着堆棧溢出，發現2個問題，看起來前途：下面第二個問題

question 1

question 2

，它看起來像我可以使用Java腳本來修改系列中值爲0的數據在，但沒有舉例說明如何做到這一點。我試着用給出的例子工作，但沒有運氣修改它以適應我的需要。

<script type="text/javascript"> 

     var jsonData =<?php echo $JSONdata ?>;  

     // Load the Visualization API and the piechart package. 
     google.load('visualization', '1', {packages: ['corechart']}); 

     // Set a callback to run when the Google Visualization API is loaded. 
     google.setOnLoadCallback(drawChart); 

     // Callback that creates and populates a data table, 
     // instantiates the Line chart, passes in the data and 
     // draws it. 
     function drawChart() { 

      // Create our data table out of JSON data loaded from server. 
      var data = new google.visualization.DataTable(jsonData); 

      var colorArray = {}; 
      for(i=0;i<data.getNumberOfRows;i++) { 
       if(data.getDataValue(i, 2,3,4,5)==0)//tell it to check data from competitor columns 
       colorArray.push({color: 'white', lineWidth:0, pointSize:0}); 
      }; 

      var options = {title: 'The Prices for <?php echo $Code ?>',pointSize:5,lineWidth:2, 
       vAxis: {title: 'Price (<?php echo substr("£", 1)?>)'}, 
       hAxis: {title: 'Date (year-month-day)'}, 
     series: {0:{color:'red'}, 1:{color: 'blue'}, 2:{color: 'green'}, 
       3:{color: 'purple'}, 4:{color: 'orange'}, 5:{color: 'teal'}, 
       6:{color: 'white', lineWidth:0, pointSize:0}} }; 

      // Instantiate and draw our chart, passing in some options. 
      var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
      chart.draw (data,options); 
         } 

    </script> 

所以我真的正在尋找兩個答案之一：

了var colorArray的修改來實現我之後的變化。

或

的碼工作位，讓我到爲0的值更改的數據爲6個串聯的（並因此從視圖中隱藏）。

非常感謝您提前幫助我解決這個問題。

山姆庫克

Answer 1

你想要做什麼，是要設置爲空值全部爲零，並設置你的選項interpolateNulls:true參數當你畫圖表：

// Set all zeros in our dataTable to null. 
var rows = data.getNumberOfRows(); 
var cols = data.getNumberOfColumns(); 
for (var i = 0; i < rows; ++i) { 
    for (var j = 0; j < cols; ++j) { 
    if (data.getValue(i, j) == 0) { 
     data.setCell(i, j, null); 
    } 
    } 
} 
// etc.. 
var element = document.getElementById('visualization'); 
var chart = new google.visualization.LineChart(element); 
chart.draw(data, { interpolateNulls: true });