Wie man dynamische Spaltenfarbe im Säulendiagramm usig google Diagramm

Question

bildet, verwende ich Google Diagramm und Anzeige des Säulendiagramms. Das funktioniert gut. mein Code

google.charts.load('current', {'packages':['columnchart']}); 
google.charts.setOnLoadCallback(drawChartTwo); 
function drawChartTwo() { 
var data = google.visualization.arrayToDataTable([ 
    ['Type', 'Total'], 
    <?php 
     foreach($val as $data){ 
     echo "['".$data['type']."', ".$data['total']."],"; 
     } 
    ?>      
]); 

var options = { 
    hAxis: { 
     title: 'Type' 
    }, 
    vAxis: { 
     title: 'Total' 
    }, 
    'width':830, 
    'height':300, 
    'title': 'Outage Analysis', 
    'is3D': true, 
    //set color base on $data['unit'] 
}; 


    var chart1 = new google.visualization.ColumnChart(document.getElementById('chart_bar')); 

    chart1.draw(data, options); 
} 

jetzt, in meiner Datenbank habe ich eine andere Spalte $ data [ ‚Einheit‘] und es vier verschiedene Kategorien hat, und ich will für andere Kategorie verschiedene Farben der Spalte angezeigt werden soll. Also, meine Frage ist, wie kann ich meine PHP-Spalte verwenden $ data ['Einheit'] Farben auf Spalte in Säulendiagramm festlegen?

Answer 1

Verwendung ein 'style'column role

Sie die Spalte mit HTML-Farb Strings bevölkern können ...

z.B. ->#f44336

var data = google.visualization.arrayToDataTable([ 
    ['Type', 'Total', {role: 'style'}], 
    <?php 
     foreach($val as $data){ 
     echo "['".$data['type']."', ".$data['total'].", '".$data['color']."'],"; 
     } 
    ?> 
]); 

---

siehe folgende Arbeits Schnipsel ...

google.charts.load('current', { 
 
    callback: drawChart, 
 
    packages:['corechart'] 
 
}); 
 

 
function drawChart() { 
 
    var data = new google.visualization.arrayToDataTable([ 
 
    ['Type', 'Total', {role: 'style'}], 
 
    ['A', 10, '#f44336'], 
 
    ['B', 14, '#e91e63'], 
 
    ['C', 16, '#9c27b0'], 
 
    ['D', 22, '#673ab7'], 
 
    ['E', 28, '#3f51b5'], 
 
    ['F', 14, '#2196f3'] 
 
    ]); 
 

 
    var options = { 
 
    height: 300, 
 
    legend: { 
 
     position: 'none' 
 
    } 
 
    }; 
 

 
    var container = document.getElementById('chart_div'); 
 
    var chart = new google.visualization.ColumnChart(container); 
 
    chart.draw(data, options); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>