Question

我正在创建一个项目，要求能够为每个图表显示具有不同值和颜色的多个Google圆环图表。目前，我正在使用示例谷歌图表代码在单独的html页面上创建3个导航到三个按钮的图表：

return $connection;

但是在<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"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Task', 'Hours per Day'], ['Work', 11], ['Sleep', 7] ]); var options = { title: 'My Daily Activities', pieHole: 0.95, slices: { 0: { color: 'yellow' }, 1: { color: 'transparent' } } }; var chart = new google.visualization.PieChart(document.getElementById('donutchart')); chart.draw(data, options); } </script> </head> <body> <div id="donutchart" style="width: 900px; height: 500px;"></div> </body> </html>数组中提供不同的数据，在data数组中提供不同的颜色。

除了必须使用三个单独的html页面创建三个单独的图表之外，还有一种方法可以仅使用1个图表并通过使用按钮和1个html页面将一个图表的数据和颜色更改为三个不同的值集？理想情况下，解决方案将有多个按钮，单击时，将更改图表以包括不同的数据集和不同的颜色图表，以区分不同的数据集，但我不确定这是否可能。

Answer 1

这样的事情可能对你有帮助......

＆＃13;

google.charts.load('current', {
  'callback': function () {
    var dataSales = google.visualization.arrayToDataTable([
      ['Year', 'Sales'],
      ['2015',  1000],
      ['2016',  1030]
    ]);

    var dataExpenses = google.visualization.arrayToDataTable([
      ['Year', 'Expenses'],
      ['2015', 600],
      ['2016', 540]
    ]);

    var dataRevenue = google.visualization.arrayToDataTable([
      ['Year', 'Revenue'],
      ['2015', 400],
      ['2016', 490]
    ]);

    var options = {
      legend: 'none',
      title: 'Results',
      pieHole: 0.3,
      slices: {
        0: { color: 'yellow' },
        1: { color: 'transparent' }
      }
    };

    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(dataSales, options);

    document.getElementById('sales').addEventListener('click', function () {
      options.slices[0].color = 'yellow';
      chart.draw(dataSales, options);
    }, false);

    document.getElementById('expenses').addEventListener('click', function () {
      options.slices[0].color = 'cyan';
      chart.draw(dataExpenses, options);
    }, false);

    document.getElementById('revenue').addEventListener('click', function () {
      options.slices[0].color = 'magenta';
      chart.draw(dataRevenue, options);
    }, false);
  },
  'packages':['corechart']
});

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>

<input type="button" id="sales" value="Sales" />
<input type="button" id="expenses" value="Expenses" />
<input type="button" id="revenue" value="Revenue" />

<div id="chart_div"></div>

＆＃13;

使用按钮更改Google图表数据和外观

1 个答案: