时间戳

首页 > 解决方案 > 如何在谷歌图表上实现 3d 饼图？

javascript - 如何在谷歌图表上实现 3d 饼图？

问题描述

所以我有来自谷歌电子表格的数据。我的图表和折线图看起来很棒，我只是想在单击时实现一个按钮，它会使饼图变成 3d。我在网上看到了一个具有该功能的代码，但我不确定如何在我的代码上实现它。此外，我正在尝试实现另一个按钮，然后将饼图上的颜色更改为随机颜色。

<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.charts.load('current');
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawVisualization);
google.charts.setOnLoadCallback(drawVisualization1);
google.charts.setOnLoadCallback(drawVisualization2);

function drawVisualization() {
var wrapper = new google.visualization.ChartWrapper({
chartType: 'LineChart',
dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
query: 'SELECT A,D WHERE D > 100 ORDER BY D',
options: {'title': 'Countries'},
containerId: 'vis_div'
});
wrapper.draw()
// No query callback handler needed!
}
function drawVisualization1() {
var wrapper = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
dataSourceUrl: 'https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq?gid=0&headers=1&tq=',
query: 'SELECT A, H, O, Q, R, U LIMIT 5 OFFSET 8',
containerId: 'c_div'
});
wrapper.draw()
// No query callback handler needed!
}
function drawVisualization2() {
var wrapper = new google.visualization.ChartWrapper({
chartType: 'PieChart',
dataSourceUrl: 'https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq?gid=0&headers=1&tq=',
query: 'SELECT A, H, O, Q, R, U LIMIT 5 OFFSET 8',
containerId: 'c1_div'
});
wrapper.draw()
// No query callback handler needed!
}

  
</script>
</head>
<body style="font-family: Arial;border: 0 none;position: relative;">
<!--Div that will hold the chart-->
<div id="vis_div" style="width: 600px; height: 400px;"></div>
<div id="c_div" style="width: 600px; height: 400px;"></div>
<div id="c1_div" style="width: 600px; height: 400px;"></div>
</body>
</html>

这是实现 3d 按钮功能的代码。

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart', 'controls']});
      google.charts.setOnLoadCallback(drawStuff);

      function drawStuff() {

        var dashboard = new google.visualization.Dashboard(
          document.getElementById('programmatic_dashboard_div'));

        // We omit "var" so that programmaticSlider is visible to changeRange.
        var programmaticSlider = new google.visualization.ControlWrapper({
          'controlType': 'NumberRangeFilter',
          'containerId': 'programmatic_control_div',
          'options': {
            'filterColumnLabel': 'Donuts eaten',
            'ui': {'labelStacking': 'vertical'}
          }
        });

        var programmaticChart  = new google.visualization.ChartWrapper({
          'chartType': 'PieChart',
          'containerId': 'programmatic_chart_div',
          'options': {
            'width': 300,
            'height': 300,
            'legend': 'none',
            'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},
            'pieSliceText': 'value'
          }
        });

        var data = google.visualization.arrayToDataTable([
          ['Name', 'Donuts eaten'],
          ['Michael' , 5],
          ['Elisa', 7],
          ['Robert', 3],
          ['John', 2],
          ['Jessica', 6],
          ['Aaron', 1],
          ['Margareth', 8]
        ]);

        dashboard.bind(programmaticSlider, programmaticChart);
        dashboard.draw(data);

        changeRange = function() {
          programmaticSlider.setState({'lowValue': 2, 'highValue': 5});
          programmaticSlider.draw();
        };

        changeOptions = function() {
          programmaticChart.setOption('is3D', true);
          programmaticChart.draw();
        };
      }

    </script>
  </head>
  <body>
    <div id="programmatic_dashboard_div" style="border: 1px solid #ccc">
      <table class="columns">
        <tr>
          <td>
            <div id="programmatic_control_div" style="padding-left: 2em; min-width: 250px"></div>
            <div>
              <button style="margin: 1em 1em 1em 2em" onclick="changeRange();">
                Select range [2, 5]
              </button><br />
              <button style="margin: 1em 1em 1em 2em" onclick="changeOptions();">
                Make the pie chart 3D
              </button>
            </div>
            <script type="text/javascript">
              function changeRange() {
                programmaticSlider.setState({'lowValue': 2, 'highValue': 5});
                programmaticSlider.draw();
              }

              function changeOptions() {
                programmaticChart.setOption('is3D', true);
                programmaticChart.draw();
              }
            </script>
          </td>
          <td>
            <div id="programmatic_chart_div"></div>
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>

标签： javascripthtmlcsschartsgoogle-visualization

解决方案

首先，不建议在元素上内联分配函数，
如提供的示例中... 

<button style="margin: 1em 1em 1em 2em" onclick="changeOptions();">  <!-- inline onclick -->
  Make the pie chart 3D
</button>

相反，为按钮分配一个 id 以添加事件侦听器... 

document.getElementById('pie-3d').addEventListener('click', function () {
  wrapper.setOption('is3D', true);
  wrapper.draw();
});

现在您可以在用于创建图表的同一函数中添加事件... 

function drawVisualization2() {
  var wrapper = new google.visualization.ChartWrapper({
    chartType: 'PieChart',
    dataSourceUrl: 'https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq?gid=0&headers=1&tq=',
    query: 'SELECT A, H, O, Q, R, U LIMIT 5 OFFSET 8',
    containerId: 'c1_div'
  });
  wrapper.draw();

  document.getElementById('pie-3d').addEventListener('click', function () {
    wrapper.setOption('is3D', true);
    wrapper.draw();
  });
}

请参阅以下工作片段，
其中还包括随机颜色的示例... 

google.charts.load('current');
google.charts.setOnLoadCallback(drawVisualization);
google.charts.setOnLoadCallback(drawVisualization1);
google.charts.setOnLoadCallback(drawVisualization2);

function drawVisualization() {
  var wrapper = new google.visualization.ChartWrapper({
    chartType: 'LineChart',
    dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
    query: 'SELECT A,D WHERE D > 100 ORDER BY D',
    options: {'title': 'Countries'},
    containerId: 'vis_div'
  });
  wrapper.draw();
}

function drawVisualization1() {
  var wrapper = new google.visualization.ChartWrapper({
    chartType: 'ColumnChart',
    dataSourceUrl: 'https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq?gid=0&headers=1&tq=',
    query: 'SELECT A, H, O, Q, R, U LIMIT 5 OFFSET 8',
    containerId: 'c_div'
  });
  wrapper.draw();
}

function drawVisualization2() {
  var wrapper = new google.visualization.ChartWrapper({
    chartType: 'PieChart',
    dataSourceUrl: 'https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq?gid=0&headers=1&tq=',
    query: 'SELECT A, H, O, Q, R, U LIMIT 5 OFFSET 8',
    containerId: 'c1_div'
  });
  wrapper.draw();

  document.getElementById('pie-3d').addEventListener('click', function () {
    wrapper.setOption('is3D', true);
    wrapper.draw();
  });

  document.getElementById('pie-color').addEventListener('click', function () {
    var colors = [];
    var pieRows = 5;
    for (var i = 0; i < pieRows; i++) {
      colors.push(getRandomColor());
    }
    wrapper.setOption('colors', colors);
    wrapper.draw();
  });

  function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  }
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<button id="pie-3d" style="margin: 1em 1em 1em 2em;">Make the pie chart 3D</button>
<button id="pie-color" style="margin: 1em 1em 1em 2em;">Change the pie chart colors</button>

<div id="c1_div" style="width: 600px; height: 400px;"></div>
<div id="vis_div" style="width: 600px; height: 400px;"></div>
<div id="c_div" style="width: 600px; height: 400px;"></div>

推荐阅读