अहम जानकारी: Google के चार्ट टूल के इमेज चार्ट वाले हिस्से को 20 अप्रैल, 2012 से आधिकारिक तौर पर हटा दिया गया था. यह हमारी समर्थन रोकने की नीति के मुताबिक काम करता रहेगा.
खास जानकारी
एक पाई चार्ट जिसे Google चार्ट एपीआई का इस्तेमाल करके इमेज के रूप में रेंडर किया जाता है.
उदाहरण
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["imagepiechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var chart = new google.visualization.ImagePieChart(document.getElementById('chart_div'));
chart.draw(data, {width: 430, height: 240, title: 'My Daily Activities'});
}
</script>
</head>
<body>
<div id="chart_div" style="width: 400px; height: 240px;"></div>
</body>
</html>
लोड हो रहा है
google.charts.load पैकेज का नाम "imagepiechart" है:
google.charts.load('current', {packages: ['imagepiechart']});
विज़ुअलाइज़ेशन की कक्षा का नाम google.visualization.ImagePieChart है
var visualization = new google.visualization.ImagePieChart(container);
डेटा फ़ॉर्मैट
दो कॉलम. पहला स्तंभ एक स्ट्रिंग होना चाहिए और उसमें स्लाइस लेबल होना चाहिए. दूसरे कॉलम में कोई संख्या होनी चाहिए और उसमें स्लाइस का मान शामिल होना चाहिए.
कॉन्फ़िगरेशन के विकल्प
विज़ुअलाइज़ेशन के draw() तरीके में पास किए गए विकल्प ऑब्जेक्ट के हिस्से के तौर पर,
आप ये विकल्प दे सकते हैं.
| नाम | टाइप | डिफ़ॉल्ट | जानकारी |
|---|---|---|---|
| बैकग्राउंड का रंग | स्ट्रिंग | '#FFFFFF' (सफ़ेद) | चार्ट एपीआई कलर फ़ॉर्मैट में चार्ट के लिए बैकग्राउंड का रंग. |
| रंग | स्ट्रिंग | ऑटो | सभी सीरीज़ में इस्तेमाल करने के लिए एक बेस कलर बताता है; हर सीरीज़, बताए गए रंग
का ग्रेड होगा. कलर को चार्ट एपीआई कलर फ़ॉर्मैट में बताया जाता है.
अगर colors बताया गया है, तो अनदेखा किया जाता है. |
| कलर | श्रेणी<string> | ऑटो | इसका इस्तेमाल करके, हर डेटा सीरीज़ के लिए खास रंग तय किए जा सकते हैं. कलर को चार्ट एपीआई कलर फ़ॉर्मैट में दिखाया जाता है.
रंग i का इस्तेमाल डेटा कॉलम i के लिए किया जाता है,
अगर रंगों से ज़्यादा डेटा कॉलम हैं, तो
उसे शुरुआती हिस्से में रैप किया जाता है. अगर सभी सीरीज़ के लिए
एक ही रंग के वैरिएशन स्वीकार किए जाते हैं, तो
color विकल्प का इस्तेमाल करें. |
| इवेंट चालू करें | बूलियन | false | इससे चार्ट उपयोगकर्ता के ट्रिगर किए गए इवेंट, जैसे कि क्लिक या माउस को फेंकता है. सिर्फ़ कुछ खास तरह के चार्ट के लिए काम करता है. नीचे इवेंट देखें. |
| ऊंचाई | संख्या | कंटेनर की ऊंचाई | चार्ट की ऊंचाई पिक्सल में. |
| is3D | बूलियन | false | अगर इसे 'सही है' पर सेट किया जाता है, तो तीन डाइमेंशन वाला चार्ट दिखता है. |
| लेबल | स्ट्रिंग | 'कोई नहीं' | हर स्लाइस के लिए कौनसा लेबल (अगर कोई है) नीचे दी गई वैल्यू में से चुनें:
|
| लेजेंड | स्ट्रिंग | 'दाएं' | चार्ट में लेजेंड की जगह. इनमें से किसी एक वैल्यू में से चुनें: 'सबसे ऊपर', 'सबसे नीचे', 'बायां', 'दायां', 'कोई नहीं'. |
| शीर्षक | स्ट्रिंग | कोई शीर्षक नहीं | चार्ट के ऊपर दिखाया जाने वाला टेक्स्ट. |
| width | संख्या | कंटेनर की चौड़ाई | चार्ट की चौड़ाई पिक्सल में. |
तरीके
| तरीका | रिटर्न टाइप | जानकारी |
|---|---|---|
draw(data, options) |
कोई नहीं | चार्ट ड्रॉ करता है. |
इवेंट
जेनरिक इमेज चार्ट पेज पर बताए गए इवेंट सुनने के लिए, रजिस्टर किया जा सकता है.
डेटा नीति
कृपया चार्ट एपीआई से जुड़ी नीति पढ़ें.