Ändern Sie Google Chart Daten und Aussehen mit Schaltfläche

Ich erstelle ein Projekt, das mehrere Google Donut-Diagramme mit verschiedenen Werten und Farben für jedes Diagramm anzeigen kann. Derzeit Ich verursache 3 Diagramme, die mit drei Tasten auf separate HTML-Seiten mit dem Beispiel Google Chart Code navigiert werden:Ändern Sie Google Chart Daten und Aussehen mit Schaltfläche

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

Aber der Bereitstellung verschiedene Daten in den data Array und verschiedene Farben in dem slices Array.

Anstatt drei separate Diagramme mit drei separaten HTML-Seiten erstellen zu müssen, gibt es eine Möglichkeit, nur 1 Diagramm zu verwenden und die Daten und Farben des Diagramms durch Verwendung von Schaltflächen und 1 HTML in drei verschiedene Werte zu ändern Seite? Idealerweise hätte die Lösung mehrere Schaltflächen, die beim Klicken das Diagramm ändern würden, um verschiedene Datensätze und ein anderes Farbdiagramm zur Unterscheidung der verschiedenen Datensätze aufzunehmen, aber ich bin mir nicht sicher, ob dies möglich ist oder nicht.

Quelle

2016-07-02 Roger99

so etwas wie dies könnte Ihnen helfen ...

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>

Quelle

2016-07-02 17:45:31 WhiteHat

Ändern Sie Google Chart Daten und Aussehen mit Schaltfläche

Antwort

Verwandte Themen