Google Bar Tablosu Bireysel Çubuk Rengi Değiştiremiyor

Google Görselleştirme API'sını kullanarak bir google çubuk grafiği oluşturdum ve stil için kullanılacak bir sütun eklemeye çalışıyorum. Aşağıda, benim .addcolumn() öğesini kullanarak ve her bir satıra renk alanını ekledikten sonra uygulamam var, ancak her bir çubuk hala varsayılan mavi renktir. Yanlış ya da ben belgelerin bir parça yanlış anladın eğer nereye gidiyorumGoogle Bar Tablosu Bireysel Çubuk Rengi Değiştiremiyor

<script type="text/javascript"> 
// Runs onload to build the first default chart and load the bar chart package 
var jsonCoachCount; 
window.onload = function(){ 
    jsonCoachCount = JSON.parse('[{"Service_Count":"4","Name":"Other"}, {"Service_Count":"4","Name":"Campus Network"},{"Service_Count":"3","Name":"[email protected]"},{"Service_Count":"2","Name":"Customer Service"},{"Service_Count":"1","Name":"Blackboard Collaborate"},{"Service_Count":"1","Name":"Office 365"},{"Service_Count":"1","Name":"Multiple"},{"Service_Count":"1","Name":"Office-ionado"},{"Service_Count":"1","Name":"Case Notes"},{"Service_Count":"1","Name":"ResNet"}]'); 

// Load the Visualization API and the barchart package. 
    google.charts.load('current', {'packages': ['bar']}); 
// Set a callback to run when the Google Visualization API is loaded. 
    google.charts.setOnLoadCallback(drawChart); 

}; 
function drawChart(){ 

    var servicesData = new google.visualization.DataTable(); 

    servicesData.addColumn('string', 'Service'); 
    servicesData.addColumn('number', 'Number of Coaches'); 
    servicesData.addColumn({type:'string', role:'style'}); 

    for(i = 0; i < jsonCoachCount.length; i++){ 
     tempArray =[]; 
     tempArray.push(String (jsonCoachCount[i]['Name']), 
       parseInt(jsonCoachCount[i]['Service_Count']), 
       'color:Red'); 
     servicesData.addRow(tempArray); 
    } 

    var options = { 
     backgroundColor: { 
      fill: '#E8E4D8' 
     }, 
     legend: { position: 'none' }, 
     titleTextStyle:{ 
      bold: 'true' 
     }, 
     chart: { 
      title: 'Coaches by Service', 
      subtitle: 'Coaches by Services: From 2016-09-10 until Today' 
     }, 
     bar: { 
      groupWidth: '60%' 
     }, 
     'hAxis': { 
      textStyle: { 
       fontSize: 11 
      } 
     } 
    }; 

    var chart = new google.charts.Bar(document.getElementById('servicesChart')); 

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

} 
<html> 

<head> 
<script type="text/javascript"  src="https://www.gstatic.com/charts/loader.js"></script> 
</head> 

<body>

</body> 

</html>

emin değilim. Çubuk grafiğindeki çubukların rengini değiştirmek için yardımları takdir ediyorum, teşekkürler!

kaynak

2016-04-05 chaseshak

Style Column Role Tek bir çubuğu renklendirmenin en kolay yoludur.
Bununla birlikte, Materyal Çizelgeleri üzerinde çalışmaz. seçenek için

, örnek grafikleri görmek ...

Grafik 1 = Malzeme Grafik
Grafik 2 = Çekirdek Grafik
İkisi farklı stili ayarlarının olmamasına Core
İşleri, aynı şekilde inşa Malzeme
her çubuk aynı renkte olmasıyla birlikte ince ise

...

= Malzeme Grafik
kırmızı
Sadece bir dizi var için rengini değiştirmek için colors yapılandırma seçeneği kullanır, böylece sadece tek renk kabul 3 Grafik

her çubuğu için ayrı renklerle Malzeme Grafik sahip olması gerekir ...

Tablo 4 = Malzeme Grafik
Her bir değer, birden çok dizi oluşturma yerine, bir sıranın, bir kolon olarak eklenir
012 kullanır seçeneği de burada
Ancak, çalışmak Spacer sütunu ve hAxis etiket eksikliği fark çok daha zor ... kullanılabilir
series her çubuk için rengini değiştirmek içinyapılandırma seçeneği

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

 
function init() { 
 
    var jsonCoachCount = JSON.parse('[{"Service_Count":"4","Name":"Other"}, {"Service_Count":"4","Name":"Campus Network"},{"Service_Count":"3","Name":"[email protected]"},{"Service_Count":"2","Name":"Customer Service"},{"Service_Count":"1","Name":"Blackboard Collaborate"},{"Service_Count":"1","Name":"Office 365"},{"Service_Count":"1","Name":"Multiple"},{"Service_Count":"1","Name":"Office-ionado"},{"Service_Count":"1","Name":"Case Notes"},{"Service_Count":"1","Name":"ResNet"}]'); 
 

 
    var options = { 
 
     backgroundColor: { 
 
      fill: '#E8E4D8' 
 
     }, 
 
     legend: { position: 'none' }, 
 
     titleTextStyle:{ 
 
      bold: 'true' 
 
     }, 
 
     chart: { 
 
      title: 'Coaches by Service', 
 
      subtitle: 'Coaches by Services: From 2016-09-10 until Today' 
 
     }, 
 
     bar: { 
 
      groupWidth: '60%' 
 
     }, 
 
     hAxis: { 
 
      textStyle: { 
 
       fontSize: 11 
 
      } 
 
     } 
 
    }; 
 

 
    drawChart(); 
 
    drawSeriesChart(); 
 

 
    function drawChart() { 
 
     var servicesData = new google.visualization.DataTable(); 
 

 
     servicesData.addColumn('string', 'Service'); 
 
     servicesData.addColumn('number', 'Number of Coaches'); 
 
     servicesData.addColumn({type:'string', role:'style'}); 
 

 
     for (i = 0; i < jsonCoachCount.length; i++) { 
 
      var tempArray =[]; 
 
      var tempColor; 
 
      switch (i) { 
 
      case 0: 
 
       tempColor = 'color:Red'; 
 
       break; 
 

 
      case 1: 
 
       tempColor = 'orange'; 
 
       break; 
 

 
      case 2: 
 
       tempColor = 'fill-color: gold;'; 
 
       break; 
 

 
      case 3: 
 
       tempColor = 'bar {color: green;}'; 
 
       break; 
 

 
      case 4: 
 
       tempColor = 'bar {fill-color: blue;}'; 
 
       break; 
 

 
      default: 
 
       tempColor = 'bar {fill-color: cyan; stroke-color: black; stroke-width: 4;}'; 
 
      } 
 
      tempArray.push(
 
      String (jsonCoachCount[i]['Name']), 
 
      parseInt(jsonCoachCount[i]['Service_Count']), 
 
      tempColor 
 
     ); 
 
      servicesData.addRow(tempArray); 
 
     } 
 

 
     var chart = new google.charts.Bar(document.getElementById('servicesChart1')); 
 
     chart.draw(servicesData, google.charts.Bar.convertOptions(options)); 
 

 
     var chart = new google.visualization.ColumnChart(document.getElementById('servicesChart2')); 
 
     chart.draw(servicesData, options); 
 

 
     // only one series exists -- only one color will work 
 
     options.colors = ['red']; 
 
     var chart = new google.charts.Bar(document.getElementById('servicesChart3')); 
 
     chart.draw(servicesData, google.charts.Bar.convertOptions(options)); 
 
    } 
 

 
    function drawSeriesChart() { 
 
     var servicesData = new google.visualization.DataTable(); 
 

 
     servicesData.addColumn('string', 'Service'); 
 
     for (i = 0; i < jsonCoachCount.length; i++) { 
 
     servicesData.addColumn('number', String (jsonCoachCount[i]['Name'])); 
 
     servicesData.addColumn('number', 'Spacer'); 
 
     } 
 

 
     var tempArray = []; 
 
     tempArray.push('Number of Coaches'); 
 
     for (i = 0; i < jsonCoachCount.length; i++) { 
 
     tempArray.push(parseInt(jsonCoachCount[i]['Service_Count'])); 
 
     tempArray.push(null); 
 
     } 
 
     servicesData.addRow(tempArray); 
 

 
     options.colors = [ 
 
     'deeppink', 
 
     'red', 
 
     'orange', 
 
     'gold', 
 
     'green', 
 
     'blue', 
 
     'indigo', 
 
     'purple', 
 
     'violet', 
 
     'pink' 
 
     ]; 
 

 
     var chart = new google.charts.Bar(document.getElementById('servicesChart4')); 
 
     chart.draw(servicesData, google.charts.Bar.convertOptions(options)); 
 
    } 
 
}

div { 
 
    padding: 2px 0px 2px 0px; 
 
    font-weight: bold; 
 
} 
 

 
.code { 
 
    background-color: lightgray; 
 
    font-family: Courier New; 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div>1. Material Chart</div> 
 
<div id="servicesChart1"></div> 
 
<div>2. Core Chart</div> 
 
<div id="servicesChart2"></div> 
 
<div>3. Material Chart with <span class="code">colors: ['red']</span></div> 
 
<div id="servicesChart3"></div> 
 
<div>4. Multi-Series Material Chart</div> 
 
<div id="servicesChart4"></div>

kaynak

2016-04-06 13:26:02 WhiteHat

Harika bir açıklama, şimdi anladım, teşekkürler! – chaseshak

Etiketleri yatay malzeme çubuklarıyla çalışmak için herhangi bir yol var mı? – bfritz

Üzgünüz, hangi etiketler? ek açıklamalara başvuruyor musunuz? eğer öyleyse, standart grafik seçenekleriyle değil, ama kendi ... – WhiteHat

Google Bar Tablosu Bireysel Çubuk Rengi Değiştiremiyor

cevap

İlgili konular