Googleのグラフのデータと外観をボタンで変更する

私は、チャートごとに異なる値と色で複数のGoogleのドーナツチャートを表示する必要があるプロジェクトを作成しています。Googleのグラフのデータと外観をボタンで変更する

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

しかしslices、アレイ内のdata配列と異なる色で異なるデータを提供する：現在、私は、例えば、Googleのチャートのコードを持つ独立したHTMLページ上の三つのボタンでナビゲートしている3つのチャートを作成しています。

3つの別々のhtmlページを持つ3つの別々のチャートを作成する代わりに、1つのチャートのみを使用し、1つのチャートのデータと色をボタンと1つのhtmlページ？理想的には、ソリューションには複数のボタンがあり、クリックすると、異なるデータセットと異なるデータセットを区別するための異なる色のチャートを含むようにチャートが変更されますが、これが可能かどうかはわかりません。

出典

2016-07-02 Roger99

このようなものはあなたを助けるかもしれない...

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'] 
 
});

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

出典

2016-07-02 17:45:31 WhiteHat

Googleのグラフのデータと外観をボタンで変更する

答えて

関連する問題