मैं Google चार्ट में रंग सीमा कैसे सेट करूं?

Question

मैंने ColumnChart बनाया है और इसमें दो बार हैं। मैं इन दो सलाखों पर अलग-अलग रंग कैसे सेट कर सकता हूं?

मैं वर्तमान में केवल दोनों सलाखों के लिए एक रंग सेट करने,

इस कोड का उपयोग मैं का हिस्सा है में सक्षम:

var d = [['', ''], ['Bar 1', 100], ['Bar 2', 300]]; 
data = new google.visualization.arrayToDataTable(d);  

var option = { 
    title: 'Betalingsoppfølging', 
    width: '300', 
    height: '250', 
    min: '0', 
    legend: 'none', 
    colors: ['#b2cedc', '#7b7b7b','#e2e2e2', '#747c1f'] 
} 

wrap.setOptions(option); 
wrap.draw(data); 

colors: ['#b2cedc', '#7b7b7b','#b2cedc', '#7b7b7b'] साथ इरादा के लिए शुरू से अंत रंग सेट करने के लिए है बार 1 और बार 2. लेकिन मैं जो करता हूं, वह पहले रंग का उपयोग करना है।

और विकल्पों के माध्यम से पृष्ठभूमि रंग को छेड़छाड़ करने का कोई तरीका है? विज़ुअलाइज़ेशन उपकरण के लिए

टेस्ट कोड

काटें और Code Playground में पेस्ट करेंगे।

function drawVisualization() { 
    // Create and populate the data table. 
    var data = new google.visualization.DataTable(); 
    var raw_data = [['Austria', 150000, 225000]]; 

    var years = [2003, 2004]; 

    data.addColumn('string', 'Year'); 
    for (var i = 0; i < raw_data.length; ++i) { 
    data.addColumn('number', raw_data[i][0]);  
    } 

    data.addRows(years.length); 

    for (var j = 0; j < years.length; ++j) {  
    data.setValue(j, 0, years[j].toString());  
    } 
    for (var i = 0; i < raw_data.length; ++i) { 
    for (var j = 1; j < raw_data[i].length; ++j) { 
     data.setValue(j-1, i+1, raw_data[i][j]);  
    } 
    } 

    // Create and draw the visualization. 
    new google.visualization.ColumnChart(document.getElementById('visualization')). 
     draw(data, 
      {title:"Color testing", 
      width:600, height:400, 
      hAxis: {title: "Year"}, 
      colors: ['#dedb70', '#747c1f','yellow', 'red'], 
      min: '0', 
      legend: 'none' 
      } 
    ); 
} 

Answer 1

आपको रंग कोड दोहराने की आवश्यकता नहीं है, यह आपके द्वारा दिए गए सेट को दोहराएगा।

colors: ['#b2cedc', '#7b7b7b'] 

आप, साथ ही यह डिफ़ॉल्ट है, जो एक अलग रंग सेट दे देंगे, यदि आप रंग बारे में चयन नहीं कर रहे हैं का उपयोग कर सकते हैं।

पृष्ठभूमि रंग backgroundColor के माध्यम से बदल दिया गया है। इसमें 'लाल' या '# b2cedc'

जैसी स्ट्रिंग होती है, यह एक अच्छा tool है जिसे आप फ्लाई पर अपने कोड का परीक्षण करने के लिए खेल सकते हैं। ऊपर दिए गए रंग कोड को width:600, height:400, रंगों के बाद हर दूसरी पंक्ति में रंग डालना चाहिए।

This documentation भी सहायक हो सकता है।

Answer 2

समस्या यह प्रतीत होती है कि आप केवल एक प्रविष्टि, ऑस्ट्रिया, एकाधिक डेटा बिंदुओं के साथ प्रवेश कर रहे हैं। colors प्रत्येक प्रविष्टि के लिए रंग सेट करता है, प्रत्येक प्रविष्टि का डेटा बिंदु नहीं। चार्ट में एक विकल्प नहीं है जो मैं एकाधिक डेटा पॉइंट रंगों के लिए पा सकता हूं।

var raw_data = [['Austria', 150000, 225000]];

var raw_data = [['Austria', 150000, 225000],['Japan',100000,200000]];

Answer 3

बहुत उपयोगी कोड को : मैं इसे यहाँ पाया

मैं क्या मतलब बदल देखने के लिए। https://groups.google.com/forum/?fromgroups=#!topic/google-visualization-api/jCVmevbBT4Q

function drawVisualization() { 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Year'); 
     data.addColumn('number', 'Sales'); 
     data.addColumn('number', 'Expenses'); 
     data.addRows(4); 
     data.setValue(0, 0, '2004'); 
     data.setValue(0, 1, 1000); 
     data.setValue(0, 2, 400); 
     data.setValue(1, 0, '2005'); 
     data.setValue(1, 1, 1170); 
     data.setValue(1, 2, 460); 
     data.setValue(2, 0, '2006'); 
     data.setValue(2, 1, 660); 
     data.setValue(2, 2, 1120); 
     data.setValue(3, 0, '2007'); 
     data.setValue(3, 1, 1030); 
     data.setValue(3, 2, 540); 

    var chart = new google.visualization.ColumnChart(document.getElementById('visualization')); 
    chart.draw(data, { width: 640, height: 480, title: 'Company Performance', 
        vAxis: { title: 'Year', titleTextStyle: { color: 'red'} }, 
        legend: 'none', colors: ['#cc00cc', '#ccffcc'] 
        }); 

    changeColors(); 

    } 

    function changeColors() { 
    var chartArea = document.getElementsByTagName('iframe')   [0].contentDocument.getElementById('chartArea'); 
     var nodes = chartArea.getElementsByTagName('rect'); 

     // finding all <rect> elements with #cc00cc fill color and replacing them with  'blue','red','green','blue' 
     for (var i = 0; i < nodes.length; i++) { 
    var node = nodes[i]; 
    if (node.getAttribute('fill') && node.getAttribute('fill') == '#cc00cc') { 
     switch (i % 4) { 
     case 0: 
      node.setAttribute('fill', 'blue'); 
      break; 
     case 1: 
      node.setAttribute('fill', 'red'); 
      break; 
     case 2: 
      node.setAttribute('fill', 'green'); 
      break; 
     case 3: 
      node.setAttribute('fill', 'red'); 
      break; 
     } 
     } 
    } 

    // finding all <rect> elements with #ccffcc fill color and replacing them with 'blue','red','green','blue' 
    for (var i = 0; i < nodes.length; i++) { 
    var node = nodes[i]; 
    if (node.getAttribute('fill') && node.getAttribute('fill') == '#ccffcc') { 
     switch (i % 4) { 
     case 0: 
      node.setAttribute('fill', 'blue'); 
      break; 
     case 1: 
      node.setAttribute('fill', 'red'); 
      break; 
     case 2: 
      node.setAttribute('fill', 'green'); 
      break; 
     case 3: 
      node.setAttribute('fill', 'red'); 
      break; 
     } 
     } 
     } 
    }