Google Chart API - 用鼠標點擊更改數值（setValue）

我已經從Google Charts API創建了一個圓環圖。點擊每個切片時，應增加10個單位，並將相鄰切片（順時針）減少10個單位。到目前爲止，我的警報彈出窗口解釋了這一點，但我想用新值重新繪製圖表。Google Chart API - 用鼠標點擊更改數值（setValue）

這裏是我的代碼：

<html> 
    <head> 
    <!--Load the AJAX API--> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 

     // Load the Visualization API and the piechart package. 
     google.load('visualization', '1.0', {'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 pie chart, passes in the data and 
     // draws it. 
     function drawChart() { 

     // Create the data table. 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Option'); 
     data.addColumn('number', 'Value'); 
     data.addRows([ 
      ['Option A', 40], 
      ['Option B', 30], 
      ['Option C', 30] 
     ]); 

     // Set chart options 
     var options = { 
      height: 300, 
      fontName: 'Lato, sans-serif', 
      title: 'Values per option', 
      titleTextStyle: { 
      color: '#5a5a5a', 
      fontSize: 20, 
      bold: true, 
      align: 'center' 
      }, 
      pieHole: 0.6, 
      slices: { 
      0: {color: 'red'}, 
      1: {color: 'blue'}, 
      2: {color: 'green'} 
      }, 
      legend: { 
      position: 'bottom', 
      textStyle: { 
       color: '#5a5a5a', 
       fontSize: 14 
      } 
      }, 

      enableInteractivity: true, 
      pieSliceText: 'none' 
     }; 

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

     function selectHandler() { 
      var selectedItem = chart.getSelection()[0]; 
      if (selectedItem && selectedItem.row <2) { 
      var activeTrait = data.getValue(selectedItem.row, 0); 
       activePerc = data.getValue(selectedItem.row, 1); 
       activePercNew = parseInt(activePerc)+10 
       adjaceTrait = data.getValue(selectedItem.row+1, 0); 
       adjacePerc = data.getValue(selectedItem.row+1, 1); 
       adjacePercNew = parseInt(adjacePerc)-10 

      alert(activeTrait + ' has a value of ' + activePerc + '%. The new value will now be set to ' + activePercNew + '% and ' + adjaceTrait + ' will be corrected to ' + adjacePercNew + '%.'); 
      } 

      if (selectedItem && selectedItem.row == 2) { 
      var activeTrait = data.getValue(selectedItem.row, 0); 
       activePerc = data.getValue(selectedItem.row, 1); 
       activePercNew = parseInt(activePerc)+10 
       adjaceTrait = data.getValue(selectedItem.row-2, 0); 
       adjacePerc = data.getValue(selectedItem.row-2, 1); 
       adjacePercNew = parseInt(adjacePerc)-10 

      alert(activeTrait + ' has a value of ' + activePerc + '%. The new value will now be set to ' + activePercNew + '% and ' + adjaceTrait + ' will be corrected to ' + adjacePercNew + '%.'); 
      } 
     } 

     google.visualization.events.addListener(chart, 'select', selectHandler); 
     chart.draw(data, options); 
     } 

    </script> 
    </head> 
    <body> 
    <!--Div that will hold the pie chart--> 
    <div id="chart_div" style="width:800; height:300"></div> 
    </body> 
</html>

我只是想通過點擊一個切片調整選擇相鄰切片。不知道是否應該使用更改的值創建var newdata並使用chart.draw（newdata，option）？

來源

2014-10-01 wernerfeuer

是的，你幾乎在那裏，你絕對是在正確的軌道與你的答案。您可以使用data.setValue（）來調整自己的價值觀，那麼你就會有這樣的事情在你的第二個「if」語句：

data.setValue(selectedItem.row,1, activePercNew); 
    data.setValue(selectedItem.row-2,1, adjacePercNew); 
    chart.draw(data, options); 
    // the thing we just clicked on was redrawn so it lost its handler, reinstate it: 
    google.visualization.events.addListener(chart, 'select', selectHandler);

而在第一，但與selectedItem.row + 1，而不是將selectedItem相同.row-2。或者，理想情況下，整理該部分，以便兩條if語句能夠指出您所指的是哪些內容，然後用一點代碼進行重繪。例如，下面的也並不依賴於有被3段調整後的處理函數：

function selectHandler() { 
    var selectedItem = chart.getSelection()[0]; 
    var numRows = data.getNumberOfRows(); 
    // verify the selection isn't inexplicibly invalid 
    if (selectedItem && selectedItem.row < numRows && selectedItem.row >= 0) { 
    // find the two items we're looking at 
    var curItem = selectedItem.row; 

    // we either want selected.row + 1 or we want 0 if the selected item was the last one 
    var otherItem = selectedItem.row == numRows - 1 ? 0 : selectedItem.row + 1; 

    // calculate the new values 
    var activePerc = data.getValue(curItem , 1); 
    var activePercNew = parseInt(activePerc)+10; 
    var adjacePerc = data.getValue(otherItem , 1); 
    var adjacePercNew = parseInt(adjacePerc )-10; 

    // update the chart 
    data.setValue(curItem,1, activePercNew); 
    data.setValue(otherItem,1, adjacePercNew); 
    chart.draw(data, options); 
    // the thing we just clicked on was redrawn so it lost its handler, reinstate it: 
    google.visualization.events.addListener(chart, 'select', selectHandler); 
    } 
}

你可能想那麼也可以考慮，如果值是正確的強制爲零應該發生什麼 - 這種解決方案也會從圖表中消失，然後下一次點擊會強制一個無效的負值。

來源

2014-10-01 08:13:16 HeatherEMSL

謝謝你！這正是我需要的！您的建議功能完美運作。我添加了一個otherItemValue並將其放置在if語句中。如果它是0，那麼otherItem應該改爲numRows - （curItem + otherItem）。如果切片被強制歸零，這照顧到了這個問題。如果activePerc達到0，我也停止了腳本。並且放置了一個重置按鈕。再次感謝你！ – wernerfeuer 2014-10-01 09:50:28

Google Chart API - 用鼠標點擊更改數值（setValue）

回答

相關問題