पर एक ढाल जोड़ना मैं कॉलम के लिए खींचे गए एसवीजी रीक्ट्स में ढाल जोड़कर Google स्तंभ चार्ट में कुछ पिज़्ज़ा जोड़ने की कोशिश कर रहा हूं। नीचे दिया गया कोड आईफ्रेम svg> में ग्राडेंट जोड़ देगा और इस पल में (ब्राउज़र, आईई और क्रोम के बाद के संस्करण) के बारे में सभी ब्राउज़रों में सही ढंग से रीक्ट की भरण विशेषता को प्रतिस्थापित करेगा।Google- Visualization ColumnChart
मेरी समस्या यह है कि जब भी मैं एक बार (या किंवदंती) का चयन करता हूं या चयन करता हूं, तो रंग मूल रंग में रीसेट हो जाता है। मैं एक एसवीजी नोब हूं और मैं यह समझने में सक्षम नहीं हूं कि रंग कैसे रीसेट कर रहा है।
तो मेरा सवाल यह है कि किसी को भी पता है कि कैसे (जावास्क्रिप्ट/jquery का उपयोग करना) रोकने के लिए, ओवरराइट या कुछ रंगों को रीसेट करने वाले कोड में हेरफेर करते हैं? यदि संभव हो तो मैं 'इंटरैक्टिव' भागों को बरकरार रखना (टूलटिप इत्यादि) रखना पसंद करूंगा।
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Visualization API Sample</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
google.load("jquery", "1.7.1");
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
var rowData = [['Year', 'North', 'West', 'South'],
['2010', 197, 333, 298 ],
['2011', 167, 261, 381 ]];
var data = google.visualization.arrayToDataTable(rowData);
visualization = new google.visualization.ColumnChart(document.getElementById('visualization'));
google.visualization.events.addListener(visualization, 'ready', function(){
var svgns = "http://www.w3.org/2000/svg";
var gradients = [["red","#C0504D","#E6B8B7"],
["green","#9BBB59","#D8E4BC"],
["blue","#4F81BD","DCE6F1"]];
var svg_defs = $("#visualization iframe").contents().find('defs');
// add gradients to svg defs
for(var i = 0; i < gradients.length; i++){
var grad = $(document.createElementNS(svgns, "linearGradient")).
attr({id:gradients[i][0],x1:"0%",x2:"0%",y1:"0%",y2:"100%"});
var stopTop = $(document.createElementNS(svgns, "stop")).
attr({offset:"0%","stop-color":gradients[i][1]});
var stopBottom = $(document.createElementNS(svgns, "stop")).
attr({offset:"100%","stop-color":gradients[i][2]});
$(grad).append(stopTop).append(stopBottom);
svg_defs.append(grad);
}
// #3366cc, #dc3912, #ff9900 - replace default colors with gradients
$("#visualization iframe").contents().find('rect[fill="#3366cc"]').attr({'fill':'url(#blue)','stroke-width':0.4,'stroke':'#000000'});
$("#visualization iframe").contents().find('rect[fill="#dc3912"]').attr({'fill':'url(#blue)','stroke-width':0.4,'stroke':'#000000'});
$("#visualization iframe").contents().find('rect[fill="#ff9900"]').attr({'fill':'url(#blue)','stroke-width':0.4,'stroke':'#000000'});
});
// Create and draw the visualization.
visualization.draw(data,{width:600, height:400});
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 600px; height: 400px;"></div>
</body>
</html>
अद्यतन
इसलिए जब अगर मैं जहां इन रंग कोड संग्रहित किया जा सकता है (और वहाँ से काम करता है कि उन्हें प्रयोग कर रहे हैं लगता है) मिल सकता है देखने के लिए डोम के माध्यम से देख, मैं इन मिला (जो जब सेट मैं क्या चाहते हो जाएगा):
//fill
visualization.qa.l.e[0].Hm.O = "url(#blue)";
visualization.qa.l.e[1].Hm.O = "url(#red)";
visualization.qa.l.e[2].Hm.O = "url(#green)";
// stroke
visualization.qa.l.e[0].Hm.Jb = "#000000";
visualization.qa.l.e[1].Hm.Jb = "#000000";
visualization.qa.l.e[2].Hm.Jb = "#000000";
// fill-opacity
//visualization.qa.l.e[0].Hm.$b = 0.5;
//visualization.qa.l.e[1].Hm.$b = 0.5;
//visualization.qa.l.e[2].Hm.$b = 0.5;
// stroke-width
visualization.qa.l.e[0].Hm.H = 0.4;
visualization.qa.l.e[1].Hm.H = 0.4;
visualization.qa.l.e[2].Hm.H = 0.4;
// stroke-opacity
//visualization.qa.l.e[0].Hm.nc = 0.5;
//visualization.qa.l.e[1].Hm.nc = 0.5;
//visualization.qa.l.e[2].Hm.nc = 0.5;
लेकिन यह केवल एक अस्थायी समाधान हो जाएगा के रूप में मुझे यकीन है कि अगली बार जब Google अपडेट हो जाता है दृश्य कोड, इन चर नाम बदल जाएगा हूँ (मैं नहीं सोचो कि कोई चुनता है इन उद्देश्यों पर और कंप्रेसर/obfuscator का उपयोग शायद अगली बार विभिन्न चर नामों को चुनने के लिए होगा - लेकिन फिर कौन जानता है - शायद यह नहीं होगा)।
इसलिए यदि कोई अधिक स्थायी तरीका जानता है जो परिवर्तनीय नामों को मैन्युअल रूप से ढूंढने और सेट करने पर निर्भर नहीं है, तो मैं इसे प्यार करूंगा। अन्यथा, यह अब के लिए मेरी सबसे अच्छी शर्त हो सकती है।
UPDATE2 (1 मार्च, 2012) बिंदु में
प्रकरण। चर अब ले जाया जाता है:
//fill
visualization.da.C.d[0].en.S = "url(#blue)";
[यहां 'उत्परिवर्तन ऑब्सर्वर'] (http://stackoverflow.com/a/40655754/5090771) का उपयोग करके एक गैंट चार्ट पर बार रंग बदलने के लिए एक कामकाजी उदाहरण है। – WhiteHat