एरिया चार्ट बनाने वाला टूल. ज़्यादा जानकारी के लिए, Google Charts का दस्तावेज़ देखें.
यहां एरिया चार्ट बनाने का उदाहरण दिया गया है.
// Create a data table with some sample data. const sampleData = Charts.newDataTable() .addColumn(Charts.ColumnType.STRING, 'Month') .addColumn(Charts.ColumnType.NUMBER, 'Dining') .addColumn(Charts.ColumnType.NUMBER, 'Total') .addRow(['Jan', 60, 520]) .addRow(['Feb', 50, 430]) .addRow(['Mar', 53, 440]) .addRow(['Apr', 70, 410]) .addRow(['May', 80, 390]) .addRow(['Jun', 60, 500]) .addRow(['Jul', 100, 450]) .addRow(['Aug', 140, 431]) .addRow(['Sep', 75, 488]) .addRow(['Oct', 70, 521]) .addRow(['Nov', 58, 388]) .addRow(['Dec', 63, 400]) .build(); const chart = Charts.newAreaChart() .setTitle('Yearly Spending') .setXAxisTitle('Month') .setYAxisTitle('Spending (USD)') .setDimensions(600, 500) .setStacked() .setColors(['red', 'green']) .setDataTable(sampleData) .build();
तरीके
तरीका | रिटर्न टाइप | संक्षिप्त विवरण |
---|---|---|
build() | Chart | चार्ट बनाता है. |
reverse | Area | डोमेन ऐक्सिस में सीरीज़ को उलटे क्रम में दिखाता है. |
set | Area | चार्ट के बैकग्राउंड का रंग सेट करता है. |
set | Area | चार्ट में लाइनों के लिए रंग सेट करता है. |
set | Area | डेटा सोर्स का यूआरएल सेट करता है. इसका इस्तेमाल, Google Sheets जैसे बाहरी सोर्स से डेटा खींचने के लिए किया जाता है. |
set | Area | DataTableBuilder का इस्तेमाल करके, चार्ट के लिए इस्तेमाल की जाने वाली डेटा टेबल सेट करता है. |
set | Area | डेटा टेबल सेट करता है. इसमें चार्ट की लाइनें और X-ऐक्सिस लेबल शामिल होते हैं. |
set | Area | चार्ट के लिए इस्तेमाल करने के लिए, डेटा व्यू की परिभाषा सेट करता है. |
set | Area | चार्ट के लिए डाइमेंशन सेट करता है. |
set | Area | चार्ट के हिसाब से लेजेंड की पोज़िशन सेट करता है. |
set | Area | चार्ट के लेजेंड का टेक्स्ट स्टाइल सेट करता है. |
set | Area | इस चार्ट के लिए बेहतर विकल्प सेट करता है. |
set | Area | लाइन में मौजूद पॉइंट की स्टाइल सेट करता है. |
set | Area | चार्ट के लिए रेंज सेट करता है. |
set | Area | स्टैक की गई लाइनों का इस्तेमाल करता है. इसका मतलब है कि लाइन और बार वैल्यू को स्टैक (इकट्ठा) किया जाता है. |
set | Area | चार्ट का टाइटल सेट करता है. |
set | Area | चार्ट के टाइटल का टेक्स्ट स्टाइल सेट करता है. |
set | Area | हॉरिज़ॉन्टल ऐक्सिस के टेक्स्ट की स्टाइल सेट करता है. |
set | Area | हॉरिज़ॉन्टल ऐक्सिस में टाइटल जोड़ता है. |
set | Area | इससे हॉरिज़ॉन्टल ऐक्सिस के टाइटल के टेक्स्ट का स्टाइल सेट किया जाता है. |
set | Area | वर्टिकल ऐक्सिस के टेक्स्ट की स्टाइल सेट करता है. |
set | Area | वर्टिकल ऐक्सिस में टाइटल जोड़ता है. |
set | Area | वर्टिकल ऐक्सिस के टाइटल के टेक्स्ट की स्टाइल सेट करता है. |
use | Area | रेंज ऐक्सिस को लॉगरिदमिक स्केल में बदलता है. इसके लिए, सभी वैल्यू पॉज़िटिव होनी चाहिए. |
ज़्यादा जानकारी वाला दस्तावेज़
build()
चार्ट बनाता है.
वापसी का टिकट
Chart
— चार्ट ऑब्जेक्ट, जिसे दस्तावेज़ों, यूज़र इंटरफ़ेस (यूआई) एलिमेंट में जोड़ा जा सकता है या स्टैटिक इमेज के तौर पर इस्तेमाल किया जा सकता है.
reverseCategories()
डोमेन ऐक्सिस में सीरीज़ को उलटे क्रम में दिखाता है. वर्टिकल-रेंज चार्ट (जैसे, लाइन, एरिया या कॉलम चार्ट) के लिए, इसका मतलब है कि हॉरिज़ॉन्टल ऐक्सिस को दाईं से बाईं ओर खींचा जाता है. हॉरिज़ॉन्टल-रेंज चार्ट (जैसे, बार चार्ट) के लिए, इसका मतलब है कि वर्टिकल ऐक्सिस को ऊपर से नीचे तक खींचा जाता है. पाई चार्ट के लिए, इसका मतलब है कि स्लाइस को घड़ी की उलटी दिशा में बनाया जाता है.
// Creates a pie chart builder and sets drawing of the slices in a // counter-clockwise manner. const builder = Charts.newPieChart(); builder.reverseCategories();
वापसी का टिकट
Area
— यह बिल्डर, चेन करने के लिए काम का है.
setBackgroundColor(cssValue)
चार्ट के बैकग्राउंड का रंग सेट करता है.
// Creates a line chart builder and sets the background color to gray const builder = Charts.newLineChart(); builder.setBackgroundColor('gray');
पैरामीटर
नाम | टाइप | ब्यौरा |
---|---|---|
css | String | रंग की सीएसएस वैल्यू, जैसे कि "blue" या "#00f" . |
वापसी का टिकट
Area
— यह बिल्डर, चेन करने के लिए काम का है.
setColors(cssValues)
चार्ट में लाइनों के लिए रंग सेट करता है.
// Creates a line chart builder and sets the first two lines to be drawn in // green and red, respectively. const builder = Charts.newLineChart(); builder.setColors(['green', 'red']);
पैरामीटर
नाम | टाइप | ब्यौरा |
---|---|---|
css | String[] | रंग की सीएसएस वैल्यू का कलेक्शन, जैसे कि ["red", "#acf"] . ऐरे में nth एलिमेंट, चार्ट में nth लाइन का रंग दिखाता है. |
वापसी का टिकट
Area
— यह बिल्डर, चेन करने के लिए काम का है.
setDataSourceUrl(url)
डेटा सोर्स का यूआरएल सेट करता है. इसका इस्तेमाल, Google Sheets जैसे बाहरी सोर्स से डेटा खींचने के लिए किया जाता है. अगर डेटा सोर्स का यूआरएल और डेटाटेबल, दोनों दिए जाते हैं, तो डेटा सोर्स का यूआरएल अनदेखा कर दिया जाता है.
डेटा सोर्स से क्वेरी करने के बारे में ज़्यादा जानने के लिए, Google Charts का दस्तावेज़ देखें.
पैरामीटर
नाम | टाइप | ब्यौरा |
---|---|---|
url | String | डेटा सोर्स का यूआरएल, जिसमें कोई भी क्वेरी पैरामीटर शामिल हो. |
वापसी का टिकट
Area
— यह बिल्डर, चेन करने के लिए काम का है.
setDataTable(tableBuilder)
DataTableBuilder का इस्तेमाल करके, चार्ट के लिए इस्तेमाल की जाने वाली डेटा टेबल सेट करता है. यह build()
को कॉल किए बिना, डेटा टेबल सेट करने का आसान तरीका है.
पैरामीटर
नाम | टाइप | ब्यौरा |
---|---|---|
table | Data | डेटा टेबल बिल्डर. इस कॉल के हिस्से के तौर पर, एक नई डेटा टेबल तुरंत बन जाती है. इसलिए, बिल्डर में किए गए किसी भी अपडेट को चार्ट में नहीं दिखाया जाएगा. |
वापसी का टिकट
Area
— यह बिल्डर, चेन करने के लिए काम का है.
setDataTable(table)
डेटा टेबल सेट करता है. इसमें चार्ट की लाइनें और X-ऐक्सिस लेबल शामिल होते हैं. पहला कॉलम, स्ट्रिंग होना चाहिए. साथ ही, इसमें हॉरिज़ॉन्टल ऐक्सिस के लेबल होने चाहिए. इसके बाद, कितने भी कॉलम हो सकते हैं. हालांकि, सभी कॉलम में संख्याएं होनी चाहिए. हर कॉलम को एक अलग लाइन के तौर पर दिखाया जाता है.
पैरामीटर
नाम | टाइप | ब्यौरा |
---|---|---|
table | Data | चार्ट के लिए इस्तेमाल की जाने वाली डेटा टेबल. |
वापसी का टिकट
Area
— यह बिल्डर, चेन करने के लिए काम का है.
setDataViewDefinition(dataViewDefinition)
चार्ट के लिए इस्तेमाल करने के लिए, डेटा व्यू की परिभाषा सेट करता है.
पैरामीटर
नाम | टाइप | ब्यौरा |
---|---|---|
data | Data | डेटा व्यू की परिभाषा वाला ऑब्जेक्ट, जो चार्ट बनाने के लिए दिए गए डेटा सोर्स से मिले डेटा के आधार पर, व्यू तय करता है. |
वापसी का टिकट
Area
— यह बिल्डर, चेन करने के लिए काम का है.
setDimensions(width, height)
चार्ट के लिए डाइमेंशन सेट करता है.
पैरामीटर
नाम | टाइप | ब्यौरा |
---|---|---|
width | Integer | चार्ट की चौड़ाई, पिक्सल में. |
height | Integer | चार्ट की ऊंचाई, पिक्सल में. |
वापसी का टिकट
Area
— यह बिल्डर, चेन करने के लिए काम का है.
setLegendPosition(position)
चार्ट के हिसाब से लेजेंड की पोज़िशन सेट करता है. डिफ़ॉल्ट रूप से, कोई लेजेंड नहीं होता.
// Creates a line chart builder and sets the legend position to right. const builder = Charts.newLineChart(); builder.setLegendPosition(Charts.Position.RIGHT);
पैरामीटर
नाम | टाइप | ब्यौरा |
---|---|---|
position | Position | लेजेंड की पोज़िशन. |
वापसी का टिकट
Area
— यह बिल्डर, चेन करने के लिए काम का है.
setLegendTextStyle(textStyle)
चार्ट के लेजेंड का टेक्स्ट स्टाइल सेट करता है.
// Creates a line chart builder and sets it up for a blue, 26-point legend. const textStyleBuilder = Charts.newTextStyle().setColor('#0000FF').setFontSize(26); const style = textStyleBuilder.build(); const builder = Charts.newLineChart(); builder.setLegendTextStyle(style);
पैरामीटर
नाम | टाइप | ब्यौरा |
---|---|---|
text | Text | चार्ट के लेजेंड के लिए इस्तेमाल होने वाला टेक्स्ट स्टाइल. |
वापसी का टिकट
Area
— यह बिल्डर, चेन करने के लिए काम का है.
setOption(option, value)
इस चार्ट के लिए बेहतर विकल्प सेट करता है. इस चार्ट के लिए उपलब्ध विकल्प देखें. अगर दिया गया विकल्प अमान्य है, तो इस तरीके का कोई असर नहीं पड़ेगा.
// Build an area chart with a 1-second animation duration. const builder = Charts.newAreaChart(); builder.setOption('animation.duration', 1000); const chart = builder.build();
पैरामीटर
नाम | टाइप | ब्यौरा |
---|---|---|
option | String | सेट करने का विकल्प. |
value | Object | सेट की जाने वाली वैल्यू. |
वापसी का टिकट
Area
— यह बिल्डर, चेन करने के लिए काम का है.
setPointStyle(style)
लाइन में मौजूद पॉइंट की स्टाइल सेट करता है. डिफ़ॉल्ट रूप से, पॉइंट की कोई खास स्टाइल नहीं होती और सिर्फ़ लाइन दिखती है.
// Creates a line chart builder and sets large point style. const builder = Charts.newLineChart(); builder.setPointStyle(Charts.PointStyle.LARGE);
पैरामीटर
नाम | टाइप | ब्यौरा |
---|---|---|
style | Point | लाइन में पॉइंट के लिए इस्तेमाल की जाने वाली स्टाइल. |
वापसी का टिकट
Area
— यह बिल्डर, चेन करने के लिए काम का है.
इन्हें भी देखें
setRange(start, end)
चार्ट के लिए रेंज सेट करता है.
अगर कोई डेटा पॉइंट रेंज से बाहर आता है, तो उन डेटा पॉइंट को शामिल करने के लिए रेंज को बड़ा किया जाता है.
पैरामीटर
नाम | टाइप | ब्यौरा |
---|---|---|
start | Number | रेंज ऐक्सिस की सबसे निचली ग्रिड लाइन की वैल्यू. |
end | Number | रेंज ऐक्सिस की सबसे ऊपरी ग्रिड लाइन की वैल्यू. |
वापसी का टिकट
Area
— यह बिल्डर, चेन करने के लिए काम का है.
setStacked()
स्टैक की गई लाइनों का इस्तेमाल करता है. इसका मतलब है कि लाइन और बार वैल्यू को स्टैक (इकट्ठा) किया जाता है. डिफ़ॉल्ट रूप से, स्टैकिंग नहीं होती.
वापसी का टिकट
Area
— यह बिल्डर, चेन करने के लिए काम का है.
setTitle(chartTitle)
चार्ट का टाइटल सेट करता है. टाइटल, चार्ट के ऊपर बीच में दिखता है.
// Creates a line chart builder and title to 'My Line Chart'. const builder = Charts.newLineChart(); builder.setTitle('My Line Chart');
पैरामीटर
नाम | टाइप | ब्यौरा |
---|---|---|
chart | String | चार्ट का टाइटल. |
वापसी का टिकट
Area
— यह बिल्डर, चेन करने के लिए काम का है.
setTitleTextStyle(textStyle)
चार्ट के टाइटल का टेक्स्ट स्टाइल सेट करता है.
// Creates a line chart builder and sets it up for a blue, 26-point title. const textStyleBuilder = Charts.newTextStyle().setColor('#0000FF').setFontSize(26); const style = textStyleBuilder.build(); const builder = Charts.newLineChart(); builder.setTitleTextStyle(style);
पैरामीटर
नाम | टाइप | ब्यौरा |
---|---|---|
text | Text | चार्ट के टाइटल के लिए इस्तेमाल की जाने वाली टेक्स्ट स्टाइल. Charts.newTextStyle() को कॉल करके, Text ऑब्जेक्ट बनाया जा सकता है. |
वापसी का टिकट
Area
— यह बिल्डर, चेन करने के लिए काम का है.
setXAxisTextStyle(textStyle)
हॉरिज़ॉन्टल ऐक्सिस के टेक्स्ट की स्टाइल सेट करता है.
// Creates a line chart builder and sets the X-axis text style to blue, 18-point // font. const textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build(); const builder = Charts.newLineChart(); builder.setXAxisTextStyle(textStyle);
पैरामीटर
नाम | टाइप | ब्यौरा |
---|---|---|
text | Text | हॉरिज़ॉन्टल ऐक्सिस के टाइटल के लिए इस्तेमाल की जाने वाली टेक्स्ट स्टाइल. Charts.newTextStyle() को कॉल करके, Text ऑब्जेक्ट बनाया जा सकता है. |
वापसी का टिकट
Area
— यह बिल्डर, चेन करने के लिए काम का है.
setXAxisTitle(title)
हॉरिज़ॉन्टल ऐक्सिस में टाइटल जोड़ता है. टाइटल को बीच में रखा जाता है और यह ऐक्सिस वैल्यू के लेबल के नीचे दिखता है.
// Creates a line chart builder and sets the X-axis title. const builder = Charts.newLineChart(); builder.setTitle('X-axis Title');
पैरामीटर
नाम | टाइप | ब्यौरा |
---|---|---|
title | String | X-ऐक्सिस का टाइटल. |
वापसी का टिकट
Area
— यह बिल्डर, चेन करने के लिए काम का है.
setXAxisTitleTextStyle(textStyle)
इससे हॉरिज़ॉन्टल ऐक्सिस के टाइटल के टेक्स्ट का स्टाइल सेट किया जाता है.
// Creates a line chart builder and sets the X-axis title text style to blue, // 18-point font. const textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build(); const builder = Charts.newLineChart(); builder.setXAxisTitleTextStyle(textStyle);
पैरामीटर
नाम | टाइप | ब्यौरा |
---|---|---|
text | Text | हॉरिज़ॉन्टल ऐक्सिस के टाइटल के लिए इस्तेमाल की जाने वाली टेक्स्ट स्टाइल. Charts.newTextStyle() को कॉल करके, Text ऑब्जेक्ट बनाया जा सकता है. |
वापसी का टिकट
Area
— यह बिल्डर, चेन करने के लिए काम का है.
setYAxisTextStyle(textStyle)
वर्टिकल ऐक्सिस के टेक्स्ट की स्टाइल सेट करता है.
// Creates a line chart builder and sets the Y-axis text style to blue, 18-point // font. const textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build(); const builder = Charts.newLineChart(); builder.setYAxisTextStyle(textStyle);
पैरामीटर
नाम | टाइप | ब्यौरा |
---|---|---|
text | Text | हॉरिज़ॉन्टल ऐक्सिस के टाइटल के लिए इस्तेमाल की जाने वाली टेक्स्ट स्टाइल. Charts.newTextStyle() को कॉल करके, Text ऑब्जेक्ट बनाया जा सकता है. |
वापसी का टिकट
Area
— यह बिल्डर, चेन करने के लिए काम का है.
setYAxisTitle(title)
वर्टिकल ऐक्सिस में टाइटल जोड़ता है. टाइटल को बीच में रखा जाता है और यह वैल्यू लेबल की बाईं ओर दिखता है.
// Creates a line chart builder and sets the Y-axis title. const builder = Charts.newLineChart(); builder.setYAxisTitle('Y-axis Title');
पैरामीटर
नाम | टाइप | ब्यौरा |
---|---|---|
title | String | Y-ऐक्सिस का टाइटल. |
वापसी का टिकट
Area
— यह बिल्डर, चेन करने के लिए काम का है.
setYAxisTitleTextStyle(textStyle)
वर्टिकल ऐक्सिस के टाइटल के टेक्स्ट की स्टाइल सेट करता है.
// Creates a line chart builder and sets the Y-axis title text style to blue, // 18-point font. const textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build(); const builder = Charts.newLineChart(); builder.setYAxisTitleTextStyle(textStyle);
पैरामीटर
नाम | टाइप | ब्यौरा |
---|---|---|
text | Text | हॉरिज़ॉन्टल ऐक्सिस के टाइटल के लिए इस्तेमाल की जाने वाली टेक्स्ट स्टाइल. Charts.newTextStyle() को कॉल करके, Text ऑब्जेक्ट बनाया जा सकता है. |
वापसी का टिकट
Area
— यह बिल्डर, चेन करने के लिए काम का है.
useLogScale()
रेंज ऐक्सिस को लॉगरिदमिक स्केल में बदलता है. इसके लिए, सभी वैल्यू पॉज़िटिव होनी चाहिए. रेंज ऐक्सिस, वर्टिकल चार्ट (जैसे, लाइन, एरिया या कॉलम) के लिए वर्टिकल ऐक्सिस और हॉरिज़ॉन्टल चार्ट (जैसे, बार) के लिए हॉरिज़ॉन्टल ऐक्सिस होता है.
वापसी का टिकट
Area
— यह बिल्डर, चेन करने के लिए काम का है.