2016-08-01 4 views
0

hier ist mein Code ist, was so weit das Diagramm Hintergrundfarbe geht mit ihm nicht stimmt ...Wie die Hintergrundfarbe für die Google Chart API zu ändern, was mache ich falsch

ich alles andere funktioniert wissen, aber ich kann die Hintergrundfarbe überhaupt nicht ändern. Und ich schaue auf die Dokumentation und ich komme immer wieder zu dem gleichen Schluss ... Nichts.

der Code selbst alle angegebenen Variablen abruft, baut das Diagramm aus und ändert den ** HTML Hintergrund, nicht aber die Grafik Hintergrundfarbe ändern

<html> 
    <head> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
    <?php echo "<style> body, div {background-color: #".$_GET['color']."} </style>"?> 
    <script type="text/javascript"> 
     google.charts.load('current', {'packages':['bar']}); 
     google.charts.setOnLoadCallback(drawStuff); 


     var goal = <?php echo $_GET['goal']; ?>; 
     var complete = <?php echo $_GET['complete']; ?>; 
     var dmr = <?php echo $_GET['dmr']; ?>; 
     var wysb = <?php echo $_GET['wysb']; ?>; 
     function drawStuff() { 

     var data = new google.visualization.arrayToDataTable([ 
      ['Type', 'Quantity:'], 
      ["Goal", goal], 
      ["Complete", complete], 
      ["DMR", dmr], 
      ["W.Y.S.B.", wysb], 
     ]); 

     var options = { 
      title: 'Productivity Monitor', 
      width: 900, 
      legend: { position: 'none' }, 
      chart: { title: 'Productivity Monitor', 
        subtitle: 'Comparative Chart with color indicator background' }, 
      bars: 'horizontal', // Required for Material Bar Charts. 
      backgroundColor :{fill : '<?php echo "#".$_GET["color"]; ?>' }, 
      axes: { 
      x: { 
       0: { side: 'top', label: 'Percentage'} // Top x-axis. 
      } 
      }, 
      bar: { groupWidth: "90%" } 
     }; 

     var chart = new google.charts.Bar(document.getElementById('top_x_div')); 
     chart.draw(data, options); 
     }; 
    </script> 
    </head> 
    <body> 
    <div id="top_x_div" style="width: 900px; height: 500px;"></div> 
    </body> 
</html> 
+0

Wenn Sie 'fill: 'ändern ''mit fest codierter Farbe, ändert sich das? –

Antwort

0

verwenden erhalten:

chart.draw(data, google.charts.Bar.convertOptions(options)); 

Statt dessen:

chart.draw(data, options); 

von https://developers.google.com/chart/interactive/docs/gallery/barchart :

Die Material Charts sind in der Betaversion. Das Aussehen und die Interaktivität sind weitgehend endgültig, aber viele der verfügbaren Optionen in Classic Charts sind noch nicht in ihnen verfügbar. Sie können in diesem Problem eine Liste der Optionen finden, die noch nicht unterstützt werden.

Auch sind die Art und Weise Optionen erklärt nicht abgeschlossen ist, so müssen Sie Ihre Optionen konvertieren, indem Sie diese Zeile ersetzen:

chart.draw (Daten, Optionen);

... mit diesem:

chart.draw (Daten, google.charts.Bar.convertOptions (Optionen));