Google चार्ट, प्रत्येक बार

Question

मैं इस Google बार चार्ट है के लिए अलग अलग रंग:

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', 
    }); 
    } 

सभी ठीक चलाता है, लेकिन बात यह है कि दोनों सलाखों के एक ही रंग है, और मुझे करने में सक्षम होना चाहते हैं प्रत्येक बार के लिए अलग रंग।

क्या कोई इस पर मेरी सहायता कर सकता है?

Answer 1

चीजों को करने के लिए एक हैकी तरीका उन्हें एक ही पंक्ति में डाल दिया गया है, और एपीआई इस पर अलग-अलग रंग निर्दिष्ट करेगा। इसलिए आपके उदाहरण के लिए

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', 
    }); 
} 

आप अपने स्वयं के रंग chart.draw विकल्पों की तरह में इस ऐड की जरूरत है,

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

अगर वहाँ भी कई बार हालांकि कर रहे हैं, यह एक बुरा विकल्प हो सकता है उस के लिए कृपया

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

Answer 2

को देखो वास्तव में, आप रंग डालने के लिए विकल्पों variabl में विशेषता के लिए है ई।

... 

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

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

Answer 3

कृपया विकल्पों में इस जोड़ें:

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

तरह:

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

Answer 4

सुनिश्चित नहीं हैं कि क्यों कोई शैली भूमिका कॉलम में उल्लेख किया है - मुझे लगता है वे प्रारंभिक के बाद जोड़ा गया था सवाल, लेकिन किसी के लिए अब यह देखने के लिए, एक बेहतर तरीका है:

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', 
     }); 
    } 

आप अपने चार्ट को वास्तव में बदसूरत बनाने के लिए कई अन्य सीएसएस शैलियों को सेट कर सकते हैं।

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

नोट है कि यह RGBA() निर्दिष्ट रंग का समर्थन नहीं लगता है - आप शैली भूमिका पर अस्पष्टता सेट करना होगा।

http://jsfiddle.net/a1og7rq4/

Sidenote::

यहाँ एक बेला है आप एक से अधिक श्रृंखला है, तो आप प्रत्येक श्रृंखला डेटा स्तंभ के बाद एक शैली भूमिका स्तंभ की जरूरत है।

यहाँ एक और बेला दिखाया जा रहा है कि (अस्पष्टता के साथ के रूप में अच्छी): http://jsfiddle.net/v5hfdm6c/1

यहाँ संशोधित समारोह (स्पष्टता के लिए ऊपर असंशोधित एक छोड़ दिया)

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', 
}); 

}

Answer 5

यहाँ है मेरा जवाब।यह 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

में एक सरणी परिवर्तित करने का ख्याल रखता है जो उन लोगों के पाई चार्ट का उपयोग कर रहे के लिए:

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' } 
         } 
        };