Google Material Tabelle Säulendiagramm (Balkendiagramm) benutzerdefinierte Spalte Farbe nicht funktionierte

ich ein einfaches Säulendiagramm in HTML-JavaScript mit google chart .Ich habe Google materiel chart CDN verwendet zeichnen möge ein Säulendiagramm mit 4 Reihen mit 4 verschiedenen Farben zu zeichnen .Google Material Tabelle Säulendiagramm (Balkendiagramm) benutzerdefinierte Spalte Farbe nicht funktionierte

Ich habe viele Optionen ausprobiert, aber nichts funktioniert richtig. wenn ich die colors: ['#b0120a', '#004411', '#ffab91', '#004411'] verwendet habe, wird nur die erste Farbe in allen 4 Spalten angezeigt. Ich habe auch versucht {role:'style'} aber immer noch nicht funktioniert.

<html> 
<head> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
    <script type="text/javascript"> 
     //google.charts.load('current', {'packages':['bar']}); 
     google.charts.load('visualization', '1', {packages: ['corechart', 'bar']}); 
     google.charts.setOnLoadCallback(drawChart); 
     function drawChart() { 

     /*var data = google.visualization.arrayToDataTable([ 
      ['Class', 'Total',{role: 'style'}], 
      ['A', 10,'color: #b0120a'], 
      ['B', 30,'color: #004411'], 
      ['C', 20,'color: #ffab91'], 
      ['D', 30,'color: #004411'] 
     ]);*/ 
     var data = google.visualization.arrayToDataTable([ 
      ['Class', 'Total'], 
      ['A', 10], 
      ['B', 30], 
      ['C', 20], 
      ['D', 30] 
     ]); 

     var options = { 
      isStacked: true, 
      title: 'Class wise total students', 
      colors: ['#b0120a', '#004411', '#ffab91', '#004411'], 
     }; 

     var chart = new google.charts.Bar(document.getElementById('columnchart_material')); 
     chart.draw(data, google.charts.Bar.convertOptions(options)); 
     } 
    </script> 
</head> 
<body> 
<div id="columnchart_material" style="width: 100%; height: 100%;"></div> 
</body> 
</html>

Die Grafik ist wie:

Aber ich 4 verschiedene Farben für 4 Spalten wollen. Vielen Dank im Voraus.

Quelle

2016-07-24 Avishek

Mögliches Duplikat [Google Balkendiagramm kann keine einzelne Balkenfarbe ändern] (http://stackoverflow.com/questions/36437422/google-bar-chart-cannot-change- Individual-Bar-Farbe) – WhiteHat

Ich habe alle diese verwandten Frage auf Stackoverflow gesucht, aber habe nicht meine Frage schlanker gefunden, deshalb habe ich meine Frage separat gepostet. – Avishek

Yaa, endlich habe ich diese eine richtig gemacht und genau wollte ich sein. Bitte beachten Sie den Code unten, wenn Sie irgendwann benötigt.

<html> 
<head> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
    <script type="text/javascript"> 
     google.charts.load('visualization', '1.1', {packages: ['corechart']}); 
     google.charts.setOnLoadCallback(drawChart); 
     function drawChart() {  
     var data = google.visualization.arrayToDataTable([ 
      ['Class', 'Total',{role: 'style'}], 
      ['A', 10,'color: #b0120a'], 
      ['B', 30,'color: #004411'], 
      ['C', 20,'color: #ffab91'], 
      ['D', 30,'color: #004411'] 
     ]); 

     var options = { 
      isStacked: false, 
      title: 'Class wise total students', 
     }; 

     var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material')); 
     chart.draw(data, options); 
     } 
    </script> 
</head> 
<body> 
<div id="columnchart_material" style="width: 100%; height: 100%;"></div> 
</body> 
</html>

Ich muss die Definition von chart hier geändert werden. Von var chart = new google.charts.Bar(document.getElementById('columnchart_material')); zu der modifizierten als var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material'));. Es funktioniert jetzt. Die Grafik ist wie ....

Quelle

2016-07-24 11:46:04 Avishek

Sie haben es geschafft, [Spaltenrollen] (https://developers.google.com/chart/interactive/docs/roles#what-roles-are-available), einschließlich ''style'', funktionieren nicht in _Material_diagrammen , nur _Core_ Diagramme. [hier] (http://Stackoverflow.com/a/36452554/5090771) sind einige andere Optionen ... – WhiteHat

ja du bist richtig @WhiteHat .. – Avishek

Google Material Tabelle Säulendiagramm (Balkendiagramm) benutzerdefinierte Spalte Farbe nicht funktionierte

Antwort

Verwandte Themen