Question

我已经使用Google Charts API创建了一个圆环图。单击每个切片时，它应增加10个单位，并将相邻切片（顺时针）减少10个单位。到目前为止我所提供的是一个警告弹出窗口，解释了这一点，但我想用新值重绘图表。

这是我的代码：

<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>

我只想通过单击一个切片来调整选定和相邻切片的大小。

交互式甜甜圈图表Google Charts API

0 个答案: