从Google Charts API获取pieStartValue

问题描述：

我正在使用Google Charts API来创建一个交互式饼图，以响应鼠标单击。通过点击任何细分，它应该增加5％，并将细分减少5％。这是我的代码：从Google Charts API获取pieStartValue

<!DOCTYPE html> 

<html> 
    <head> 
     <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', 'Index'); 
      data.addColumn('number', 'Emphasis'); 
      data.addColumn('number', 'Position'); 
      data.addRows([ 
       ['Option A', 20, 1], 
       ['Option B', 30, 2], 
       ['Option C', 50, 3] 
      ]); 

      // Set chart options 
      var options = { 
       height: 300, 
       pieStartAngle: 0, 
       slices: { 
       0: {color: 'blue'}, 
       1: {color: 'green'}, 
       2: {color: 'yellow'} 
       }, 
       enableInteractivity: false, 
      }; 

      // 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]; 
       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; 
       var otherItemValue = data.getValue(otherItem , 1); 
       if (otherItemValue == 0) { 
        var numRowsNew = data.getNumberOfRows(); 
        var otherItem = numRows - (curItem + otherItem); 
       } 

       if (otherItem==0) { 
        var options = { 
         height: 300, 
         pieStartAngle: 18, 
         slices: { 
         0: {color: 'blue'}, 
         1: {color: 'green'}, 
         2: {color: 'yellow'} 
         }, 
         enableInteractivity: false, 
        }; 
       } else { 
        var options = { 
         height: 300, 
         pieStartAngle: 0, 
         slices: { 
         0: {color: 'blue'}, 
         1: {color: 'green'}, 
         2: {color: 'yellow'} 
         }, 
         enableInteractivity: false, 
        }; 
       } 

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

       if (activePerc == 100) { 

       } else { 

       // 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); 
       } 
       } 
      } 

      function resize() { 
       var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
       chart.draw(data, options); 
      } 

      window.onload = resize(); 
      window.onresize = resize; 

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

     </script> 
    </head> 

    <body> 
     <div id="chart_div"></div> 
    </body> 
</html>

我知道那还不完美。但是，如果您点击选项A（蓝色），它可以正常工作。如果你点击选项B（绿色），它可以正常工作。如果您在选项C（黄色）上点击一次，它也可以正常工作。但是，如果您在选项C（黄色）上再次单击，则旋转是错误的。第一次点击发起了18度（5％）的pieStartAngle。

所以我的问题：如何获得鼠标点击之间的当前pieStartAngle？如果角度发生了变化，我希望在选项C上单击新的图形将图表再旋转18度。等等。我在那里需要新的角度来增加18度。

答

options变量是一个简单的JS对象，所以你可以使用options.pieStartAngle来访问它 - 无论是获取和设置。

因此，要获得点击（之前或重绘后）之间的值，你可以使用：点击之间

var pieAngle = options.pieStartAngle;

或者将其设置为0（或任何其他值），您可以在重绘之前做到这一点：

options.pieStartAngle = 0;

这里有一个快速小提琴，保持起始角在0：http://jsfiddle.net/6kcom3fj/

更新时间：通过18为每次点击递增的角度，你只需要一个杂物可以追踪当前角度的功能，然后在每次点击时将其增加18，并将options.pieStartAngle设置为该值。更新小提琴：http://jsfiddle.net/6kcom3fj/2/ - 我用UPDATE标注了相关部分：评论:)

再次更新：发生在我身上的情况，您可能只想在更改最后一节时推动角度。这里有一个版本是这样做的：http://jsfiddle.net/6kcom3fj/4/

HeatherEMSL - 再次感谢您的帮助。我更新了我的问题，更加精确。如果我点击选项C，我想连续旋转图表。因此，原始的startAngle（0）+18度，然后一个新的点击将旋转startangle到18 + 18度。我尝试了你给我的var pieAngle选项，但是之后失去了图表上的所有功能。 – wernerfeuer 2014-10-03 10:10:58

啊，在这种情况下，你只需要做options.pieStartAngle + = 18;在每次重绘之前。更新我的答案... – HeatherEMSL 2014-10-03 10:28:25

这个伎俩！ – wernerfeuer 2014-10-03 16:39:01

从Google Charts API获取pieStartValue

相关推荐