यहाँ। मेरे पास मूल Google चार्ट है। मैं चार्ट का बैकग्राउंड कलर बदलना चाहता हूं। ड्रॉ फ़ंक्शन के साथ इसका काम ठीक है, लेकिन समस्या यह थी कि मुझे डेटा या ड्रॉ फ़ंक्शन के साथ पुन: प्रस्तुत किए बिना केवल Google चार्ट रंग बदलने की आवश्यकता थी।

इस कदर

function changeColor(){
   gchart.backgroundColor='red';
}

इसके अलावा।

function changeColor(){
   chartOption.backgroundColor='red';
   gChart.draw([somearrayToDataTable], chartOption)
}
1
kamlesh parmar 27 जुलाई 2020, 14:54

1 उत्तर

सबसे बढ़िया उत्तर

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

अन्यथा, आपको चार्ट द्वारा निर्मित एसवीजी को मैन्युअल रूप से बदलना होगा,
चार्ट के तैयार कार्यक्रम पर।

इस मामले में, पृष्ठभूमि का रंग चार्ट के मुख्य <rect> तत्व पर सेट किया जाएगा।
तैयार घटना पर, हम तत्व को खोजने और 'fill' विशेषता को बदलने के लिए मूल रंग का उपयोग कर सकते हैं।

रंग से संबंधित कॉन्फ़िगरेशन विकल्प सेट करते समय,
चार्ट किसी भी नामित रंग को HEX मानों में बदल देगा।

'लाल' = #ff0000

चार्ट कॉन्फ़िगरेशन विकल्पों में उपयोग किए गए किसी भी HEX मान को लोअर केस में भी बदल देगा।

#FF0000 बन जाएगा #ff0000

इसके लिए काम करने के लिए, हमें अपने कॉन्फ़िगरेशन विकल्प में लोअर केस HEX मान का उपयोग करना चाहिए।
जैसे

backgroundColor: '#008000',  // <-- green

फिर तैयार घटना में, हम उस रंग के साथ तत्व ढूंढ सकते हैं और उसे बदल सकते हैं ...

google.visualization.events.addListener(chart, 'ready', function () {
  var rectangles = chart.getContainer().getElementsByTagName('rect');
  Array.prototype.forEach.call(rectangles, function(rect) {
    if (rect.getAttribute('fill') === options.backgroundColor) {
      rect.setAttribute('fill', '#ff0000');
    }
  });
});

निम्नलिखित कार्यशील स्निपेट देखें ...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'x');
  data.addColumn('number', 'y')
  data.addRows([
    [0, 0],
    [1, 1],
    [2, 2],
    [3, 3]
  ]);

  var options = {
    backgroundColor: '#008000',  // <-- green
    colors: ['#00ffff']
  };

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

  google.visualization.events.addListener(chart, 'ready', function () {
    var rectangles = chart.getContainer().getElementsByTagName('rect');
    Array.prototype.forEach.call(rectangles, function(rect) {
      if (rect.getAttribute('fill') === options.backgroundColor) {
        rect.setAttribute('fill', '#ff0000');  // <-- red
      }
    });
  });

  chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
0
WhiteHat 27 जुलाई 2020, 20:42