从 Google Charts API 获取 pieStartValue答案

【问题标题】：Get pieStartValue from Google Charts API从 Google Charts API 获取 pieStartValue
【发布时间】：2014-10-03 08:03:31
【问题描述】：

我正在使用 Google Charts API 创建一个响应鼠标点击的交互式饼图。通过单击任何段，它应该将其增加 5% 并将向左的段减少 5%。这是我的代码：

<!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 度。

【问题讨论】：

标签： google-visualization

【解决方案1】：

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/ - 我用更新标记相关部分：cmets :)

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

【讨论】：

HeatherEMSL - 再次感谢您的帮助。我更新了我的问题以更准确。如果我单击选项 C，我想在同一方向上连续旋转图表。因此，原始 startAngle (0) + 18 度，然后再次单击会将 startangle 旋转到 18+18 度。我尝试了您给我的 var pieAngle 选项，但随后失去了图表上的所有功能。
啊在那种情况下你只需要做 options.pieStartAngle += 18;在每次重绘之前。更新我的答案...