Google Grafik, her bir çubuk

Question

Bu Google Çubuğu Grafik sahip için farklı renk:

function drawChart() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', ''); 
    data.addColumn('number', ''); 
    data.addRows(2); 
    data.setValue(0, 0, 'Value 1'); 
    data.setValue(0, 1, 250); 
    data.setValue(1, 0, 'Value 2'); 
    data.setValue(1, 1, 100); 

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
    chart.draw(data, { 
     width: 400, 
     height: 175, 
     title: 'Total', 
     legend: 'none', 
    }); 
    } 

Tüm Tamam çalışır, ancak şey hem çubuklar aynı renge sahip, ve ben var edebilmek istiyorum her çubuk için farklı renkler.

Bu konuda bana yardımcı olan var mı?

Answer 1

Her şeyi yapmanın zor bir yolu, hepsini aynı satırın içine yerleştirir ve API buna farklı renkler atayacaktır. Dolayısıyla sizin örneğin

kendi renkleri chart.draw seçenekleri gibi bu eklemek gerekirse

function drawChart(){ 

    var data = new google.visualization.DataTable(); 
    data.addColumn('number', 'Value 1'); 
    data.addColumn('number', 'Value 2'); 
    data.addRows(2); 
    data.setValue(0, 0, 250); 
    data.setValue(0, 1, 100); 

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

    chart.draw(data, { 
     width: 600, 
     height: 175, 
     title: 'Total', 
     legend: 'none', 
    }); 
} 

, çok sayıda bar olsa varsa

colors: ['red','yellow', 'blue'], 

, bu kötü bir seçenek olabilir Bunun için Aynen, renkleri eklemek seçenekleri variabl içine özniteliği zorunda

http://code.google.com/apis/chart/interactive/docs/reference.html#barformatter

Answer 2

bakmak lütfen e.

... 

var options = { 
    width: 600, 
    height: 175, 
    title: 'Total', 
    legend: 'none', 
    colors: ['red', 'green'] 
}; 

chart.draw(data, options); 
... 

Answer 3

seçeneklerinde bu ekleyiniz:

colors:['red','#009900']

Beğen:

var options = { 
      title: 'Company Performance', 
      vAxis: {title: 'Year', titleTextStyle: {color: 'red'}}, 
      colors:['red','#009900'] 
}; 

Answer 4

emin niçin tarzı rol sütunları söz kimse - Onların ilk sonra eklendi varsayalım soru, ama şimdi bunu arayan herkes için daha iyi bir yol:

function drawChart() { 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', ''); 
     data.addColumn('number', ''); 
     data.addColumn({ type: 'string', role: 'style' }); 

     data.addRows(2); 

     data.setValue(0, 0, 'Value 1'); 
     data.setValue(0, 1, 250); 
     data.setValue(0, 2, 'rgb(200, 20, 60)'); 
     data.setValue(1, 0, 'Value 2'); 
     data.setValue(1, 1, 100); 
     data.setValue(1, 2, 'rgb(20, 200, 60)'); 

     var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
     chart.draw(data, { 
       width: 400, 
       height: 175, 
       title: 'Total', 
       legend: 'none', 
     }); 
    } 

Grafiklerinizi çok çirkin yapmak için diğer CSS stillerini ayarlayabilirsiniz. Eğer stil rolüne opaklığını ayarlamak zorunda - RGBA() belirtilen renkleri desteklemek için görünmüyor

https://developers.google.com/chart/interactive/docs/gallery/columnchart#Colors

NOT.

http://jsfiddle.net/a1og7rq4/

Sidenote:

İşte keman var Birden dizi varsa, o zaman her seri veri sütunu sonra bir stil rolü sütun gerekir. Burada

başka keman ki (donukluk ile de) gösteriyor: http://jsfiddle.net/v5hfdm6c/1 Burada

modifiye fonksiyonu (açıklık için, yukarıda modifiye edilmemiş bir sol)

function drawChart() { 
var data = new google.visualization.DataTable(); 
data.addColumn('string', ''); 
data.addColumn('number', ''); 
data.addColumn({ type: 'string', role: 'style' }); 
data.addColumn('number', ''); 
data.addColumn({ type: 'string', role: 'style' }); 

data.addRows(2); 

var i = 0; 
data.setValue(0, i++, 'Value 1'); 
data.setValue(0, i++, 200); 
data.setValue(0, i++, 'color:rgb(200, 20, 60); opacity:0.5'); 
data.setValue(0, i++, 250); 
data.setValue(0, i++, 'rgb(200, 20, 60)'); 

i = 0; 
data.setValue(1, i++, 'Value 2'); 
data.setValue(1, i++, 120); 
data.setValue(1, i++, 'color:rgb(20, 200, 60); opacity:0.5'); 
data.setValue(1, i++, 100); 
data.setValue(1, i++, 'rgb(20, 200, 60)'); 

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
chart.draw(data, { 
    width: 400, 
    height: 175, 
    title: 'Total', 
    legend: 'none', 
}); 

} İşte

Answer 5

olduğu cevabım.Bu Pasta Grafiği kullanan olanlar için

dataTable

function drawChart() { 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Season'); 
     data.addColumn('number', 'Deaths'); 
     data.addColumn({ 
      type: 'string', 
      role: 'style' 
     }); 

     var dataArray = new Array(); 
     dataArray[0] = ['Season 1', 1000, "#A0A0A0"] 
     dataArray[1] = ['Season 2', 1170, "#FF3344"] 
     dataArray[2] = ['Season 3', 660, "#BCBCBC"] 
     dataArray[3] = ['Season 4', 1248, "#B3B3B8"] 
     dataArray[4] = ['Season 5', 14353, "RED"]; 

     var charTitle = "Total deaths in Game of Thrones Series VS Screen Play Time"; 
     var noOfBars = dataArray.length; 

     data.addRows(noOfBars); 

     for (var row = 0; row < noOfBars; row++) { 
      var label=dataArray[row][0]; 
      var value=dataArray[row][1]; 
      var color=dataArray[row][2]; 
       data.setValue(row, 0, label); 
       data.setValue(row, 1, value); 
       data.setValue(row, 2, color); 
     } 



    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
    chart.draw(data, { 
     width: 600, 
     height: 300, 
     title: charTitle, 
    }); 
} 

google.load("visualization", "1", { 
    packages: ["corechart"], 
    callback: function() { 
     drawChart(); 
    } 
}); 

Answer 6

içine diziyi dönüştürme ilgilenir:

slices

// Set chart options 
    var options = {'title':'How Much Pizza I Ate Last Night', 
        'width':400, 
        'height':300, 
        slices: { 
         0: { color: 'yellow' }, 
         1: { color: 'transparent' } 
         } 
        };