कॉलम चार्ट के लिए बिल्डर. ज़्यादा जानकारी के लिए, Google चार्ट का दस्तावेज़ देखें.
इस उदाहरण में, डेटा टेबल के डेटा का इस्तेमाल करके कॉलम चार्ट बनाने का तरीका बताया गया है.
var sampleData = Charts.newDataTable()
.addColumn(Charts.ColumnType.STRING, "Year")
.addColumn(Charts.ColumnType.NUMBER, "Sales")
.addColumn(Charts.ColumnType.NUMBER, "Expenses")
.addRow(["2004", 1000, 400])
.addRow(["2005", 1170, 460])
.addRow(["2006", 660, 1120])
.addRow(["2007", 1030, 540])
.addRow(["2008", 800, 600])
.addRow(["2009", 943, 678])
.addRow(["2010", 1020, 550])
.addRow(["2011", 910, 700])
.addRow(["2012", 1230, 840])
.build();
var chart = Charts.newColumnChart()
.setTitle('Sales & Expenses')
.setXAxisTitle('Year')
.setYAxisTitle('Amount (USD)')
.setDimensions(600, 500)
.setDataTable(sampleData)
.build();
तरीके
| तरीका | रिटर्न टाइप | संक्षिप्त विवरण |
|---|---|---|
build() | Chart | चार्ट बनाता है. |
reverseCategories() | ColumnChartBuilder | डोमेन ऐक्सिस में सीरीज़ की ड्रॉइंग को उलटता है. |
setBackgroundColor(cssValue) | ColumnChartBuilder | चार्ट के लिए बैकग्राउंड का रंग सेट करता है. |
setColors(cssValues) | ColumnChartBuilder | चार्ट में लाइनों के रंग सेट करता है. |
setDataSourceUrl(url) | ColumnChartBuilder | इससे डेटा सोर्स का वह यूआरएल सेट होता है जिसका इस्तेमाल, Google जैसे किसी बाहरी सोर्स से डेटा पाने के लिए किया जाता है शीट. |
setDataTable(tableBuilder) | ColumnChartBuilder | DataटेबलBuilder का इस्तेमाल करके, चार्ट में इस्तेमाल करने के लिए डेटा टेबल सेट करता है. |
setDataTable(table) | ColumnChartBuilder | इससे वह डेटा टेबल सेट की जाती है जिसमें चार्ट के लिए लाइनें होती हैं. साथ ही, X-ऐक्सिस लेबल भी होते हैं. |
setDataViewDefinition(dataViewDefinition) | ColumnChartBuilder | चार्ट के लिए इस्तेमाल किए जाने वाले डेटा व्यू की परिभाषा सेट करता है. |
setDimensions(width, height) | ColumnChartBuilder | चार्ट के लिए डाइमेंशन सेट करता है. |
setLegendPosition(position) | ColumnChartBuilder | चार्ट के हिसाब से लेजेंड की जगह सेट करता है. |
setLegendTextStyle(textStyle) | ColumnChartBuilder | चार्ट लेजेंड के टेक्स्ट की स्टाइल सेट करता है. |
setOption(option, value) | ColumnChartBuilder | इस चार्ट के लिए बेहतर विकल्प सेट करता है. |
setRange(start, end) | ColumnChartBuilder | चार्ट के लिए रेंज सेट करता है. |
setStacked() | ColumnChartBuilder | स्टैक की गई लाइनों का इस्तेमाल करता है. इसका मतलब है कि लाइन और बार की वैल्यू एक-एक करके रखी गई हैं. |
setTitle(chartTitle) | ColumnChartBuilder | चार्ट का टाइटल सेट करता है. |
setTitleTextStyle(textStyle) | ColumnChartBuilder | चार्ट के टाइटल के टेक्स्ट की स्टाइल सेट करता है. |
setXAxisTextStyle(textStyle) | ColumnChartBuilder | हॉरिज़ॉन्टल ऐक्सिस टेक्स्ट की स्टाइल सेट करता है. |
setXAxisTitle(title) | ColumnChartBuilder | हॉरिज़ॉन्टल ऐक्सिस पर टाइटल जोड़ता है. |
setXAxisTitleTextStyle(textStyle) | ColumnChartBuilder | हॉरिज़ॉन्टल ऐक्सिस टाइटल की टेक्स्ट स्टाइल सेट करता है. |
setYAxisTextStyle(textStyle) | ColumnChartBuilder | वर्टिकल ऐक्सिस टेक्स्ट की स्टाइल सेट करता है. |
setYAxisTitle(title) | ColumnChartBuilder | लंबवत अक्ष में शीर्षक जोड़ता है. |
setYAxisTitleTextStyle(textStyle) | ColumnChartBuilder | वर्टिकल ऐक्सिस के टाइटल की टेक्स्ट स्टाइल सेट करता है. |
useLogScale() | ColumnChartBuilder | रेंज ऐक्सिस को लॉगारिद्मिक स्केल में बनाता है (सभी वैल्यू का पॉज़िटिव होना ज़रूरी है). |
विस्तृत दस्तावेज़
build()
चार्ट बनाता है.
वापसी का टिकट
Chart — एक चार्ट ऑब्जेक्ट, जिसे दस्तावेज़ों, यूज़र इंटरफ़ेस (यूआई) एलिमेंट में एम्बेड किया जा सकता है या स्टैटिक के तौर पर इस्तेमाल किया जा सकता है
इमेज.
reverseCategories()
डोमेन ऐक्सिस में सीरीज़ की ड्रॉइंग को उलटता है. वर्टिकल-रेंज चार्ट (जैसे, लाइन, एरिया या कॉलम चार्ट), इसका मतलब है कि हॉरिज़ॉन्टल ऐक्सिस दाईं से बाईं ओर बनाया गया है. इसके लिए हॉरिज़ॉन्टल रेंज चार्ट (जैसे कि बार चार्ट), इसका मतलब है कि वर्टिकल ऐक्सिस को ऊपर से लेकर नीचे. पाई चार्ट के लिए, इसका मतलब है कि स्लाइस को घड़ी की उलटी दिशा में खींचा गया है.
// Creates a pie chart builder and sets drawing of the slices in a counter-clockwise manner. var builder = Charts.newPieChart(); builder.reverseCategories();
वापसी का टिकट
ColumnChartBuilder — यह बिल्डर, चेन बनाने में मदद करता है.
setBackgroundColor(cssValue)
चार्ट के लिए बैकग्राउंड का रंग सेट करता है.
// Creates a line chart builder and sets the background color to gray
var builder = Charts.newLineChart();
builder.setBackgroundColor("gray");
पैरामीटर
| नाम | टाइप | ब्यौरा |
|---|---|---|
cssValue | String | रंग के लिए सीएसएस वैल्यू (जैसे कि "blue" या "#00f"). |
वापसी का टिकट
ColumnChartBuilder — यह बिल्डर, चेन बनाने में मदद करता है.
setColors(cssValues)
चार्ट में लाइनों के रंग सेट करता है.
// Creates a line chart builder and sets the first two lines to be drawn in green and red, // respectively. var builder = Charts.newLineChart(); builder.setColors(["green", "red"]);
पैरामीटर
| नाम | टाइप | ब्यौरा |
|---|---|---|
cssValues | String[] | कलर सीएसएस वैल्यू का कलेक्शन, जैसे कि ["red", "#acf"]. nवां एलिमेंट
जो चार्ट की nवीं लाइन के रंग को दिखाता है. |
वापसी का टिकट
ColumnChartBuilder — यह बिल्डर, चेन बनाने में मदद करता है.
setDataSourceUrl(url)
इससे डेटा सोर्स का वह यूआरएल सेट होता है जिसका इस्तेमाल, Google जैसे किसी बाहरी सोर्स से डेटा पाने के लिए किया जाता है शीट. अगर डेटा सोर्स का यूआरएल और Dataटेबल दी जाती है, तो डेटा सोर्स के यूआरएल को अनदेखा कर दिया जाता है.
डेटा सोर्स की क्वेरी करने के बारे में ज़्यादा जानने के लिए, Google Charts में मौजूद दस्तावेज़ देखें.
पैरामीटर
| नाम | टाइप | ब्यौरा |
|---|---|---|
url | String | डेटा सोर्स का यूआरएल, जिसमें क्वेरी पैरामीटर शामिल हैं. |
वापसी का टिकट
ColumnChartBuilder — यह बिल्डर, चेन बनाने में मदद करता है.
setDataTable(tableBuilder)
DataटेबलBuilder का इस्तेमाल करके, चार्ट में इस्तेमाल करने के लिए डेटा टेबल सेट करता है. यह एक आसान तरीका है
इस सुविधा का इस्तेमाल, build() को कॉल किए बिना डेटा टेबल को सेट करने के लिए किया जा सकता है.
पैरामीटर
| नाम | टाइप | ब्यौरा |
|---|---|---|
tableBuilder | DataTableBuilder | डेटा टेबल बिल्डर. इसके हिस्से के तौर पर, तुरंत एक नई डेटा टेबल बन जाती है कॉल की पहचान की है, इसलिए बिल्डर में किया जाने वाला कोई भी अपडेट चार्ट में नहीं दिखेगा. |
वापसी का टिकट
ColumnChartBuilder — यह बिल्डर, चेन बनाने में मदद करता है.
setDataTable(table)
इससे वह डेटा टेबल सेट की जाती है जिसमें चार्ट के लिए लाइनें होती हैं. साथ ही, X-ऐक्सिस लेबल भी होते हैं. कॉन्टेंट बनाने पहला कॉलम एक स्ट्रिंग होना चाहिए और इसमें हॉरिज़ॉन्टल ऐक्सिस लेबल होने चाहिए. कॉलम की कोई भी संख्या सभी अंकों में होना चाहिए. हर कॉलम को एक अलग लाइन के तौर पर दिखाया जाता है.
पैरामीटर
| नाम | टाइप | ब्यौरा |
|---|---|---|
table | DataTableSource | चार्ट के लिए इस्तेमाल की जाने वाली डेटा टेबल. |
वापसी का टिकट
ColumnChartBuilder — यह बिल्डर, चेन बनाने में मदद करता है.
setDataViewDefinition(dataViewDefinition)
चार्ट के लिए इस्तेमाल किए जाने वाले डेटा व्यू की परिभाषा सेट करता है.
पैरामीटर
| नाम | टाइप | ब्यौरा |
|---|---|---|
dataViewDefinition | DataViewDefinition | डेटा व्यू डेफ़िनिशन ऑब्जेक्ट, जो उस व्यू को तय करता है जिसे जो चार्ट ड्रॉइंग के लिए दिए गए डेटा सोर्स से ली गई है. |
वापसी का टिकट
ColumnChartBuilder — यह बिल्डर, चेन बनाने में मदद करता है.
setDimensions(width, height)
चार्ट के लिए डाइमेंशन सेट करता है.
पैरामीटर
| नाम | टाइप | ब्यौरा |
|---|---|---|
width | Integer | चार्ट की चौड़ाई, पिक्सल में. |
height | Integer | चार्ट की ऊंचाई, पिक्सल में. |
वापसी का टिकट
ColumnChartBuilder — यह बिल्डर, चेन बनाने में मदद करता है.
setLegendPosition(position)
चार्ट के हिसाब से लेजेंड की जगह सेट करता है. डिफ़ॉल्ट रूप से, कोई लेजेंड नहीं होता.
// Creates a line chart builder and sets the legend position to right. var builder = Charts.newLineChart(); builder.setLegendPosition(Charts.Position.RIGHT);
पैरामीटर
| नाम | टाइप | ब्यौरा |
|---|---|---|
position | Position | लेजेंड की जगह. |
वापसी का टिकट
ColumnChartBuilder — यह बिल्डर, चेन बनाने में मदद करता है.
setLegendTextStyle(textStyle)
चार्ट लेजेंड के टेक्स्ट की स्टाइल सेट करता है.
// Creates a line chart builder and sets it up for a blue, 26-point legend.
var textStyleBuilder = Charts.newTextStyle().setColor('#0000FF').setFontSize(26);
var style = textStyleBuilder.build();
var builder = Charts.newLineChart();
builder.setLegendTextStyle(style);
पैरामीटर
| नाम | टाइप | ब्यौरा |
|---|---|---|
textStyle | TextStyle | चार्ट लेजेंड के लिए इस्तेमाल की जाने वाली टेक्स्ट स्टाइल. |
वापसी का टिकट
ColumnChartBuilder — यह बिल्डर, चेन बनाने में मदद करता है.
setOption(option, value)
इस चार्ट के लिए बेहतर विकल्प सेट करता है. इसके लिए उपलब्ध विकल्प देखें इस चार्ट में दिखेगा. अगर दिया गया विकल्प अमान्य है, तो इस तरीके का कोई असर नहीं होता.
// Build a column chart with a 1-second animation duration.
var builder = Charts.newColumnChart();
builder.setOption('animation.duration', 1000);
var chart = builder.build();
पैरामीटर
| नाम | टाइप | ब्यौरा |
|---|---|---|
option | String | सेट करने का विकल्प. |
value | Object | सेट की जाने वाली वैल्यू. |
वापसी का टिकट
ColumnChartBuilder — यह बिल्डर, चेन बनाने में मदद करता है.
setRange(start, end)
चार्ट के लिए रेंज सेट करता है.
अगर कोई डेटा पॉइंट रेंज से बाहर आते हैं, तो उन डेटा को शामिल करने के लिए, रेंज को बड़ा किया जाता है अंक.
पैरामीटर
| नाम | टाइप | ब्यौरा |
|---|---|---|
start | Number | रेंज ऐक्सिस की सबसे नीचे वाली ग्रिड लाइन का मान. |
end | Number | रेंज ऐक्सिस की सबसे ऊंची ग्रिड लाइन का मान. |
वापसी का टिकट
ColumnChartBuilder — यह बिल्डर, चेन बनाने में मदद करता है.
setStacked()
स्टैक की गई लाइनों का इस्तेमाल करता है. इसका मतलब है कि लाइन और बार की वैल्यू एक-एक करके रखी गई हैं. डिफ़ॉल्ट रूप से, कोई स्टैकिंग नहीं है.
वापसी का टिकट
ColumnChartBuilder — यह बिल्डर, चेन बनाने में मदद करता है.
setTitle(chartTitle)
चार्ट का टाइटल सेट करता है. शीर्षक, चार्ट के ऊपर बीच में दिखाया जाता है.
// Creates a line chart builder and title to 'My Line Chart'.
var builder = Charts.newLineChart();
builder.setTitle('My Line Chart')
पैरामीटर
| नाम | टाइप | ब्यौरा |
|---|---|---|
chartTitle | String | चार्ट का टाइटल. |
वापसी का टिकट
ColumnChartBuilder — यह बिल्डर, चेन बनाने में मदद करता है.
setTitleTextStyle(textStyle)
चार्ट के टाइटल के टेक्स्ट की स्टाइल सेट करता है.
// Creates a line chart builder and sets it up for a blue, 26-point title.
var textStyleBuilder = Charts.newTextStyle().setColor('#0000FF').setFontSize(26);
var style = textStyleBuilder.build();
var builder = Charts.newLineChart();
builder.setTitleTextStyle(style);
पैरामीटर
| नाम | टाइप | ब्यौरा |
|---|---|---|
textStyle | TextStyle | चार्ट के टाइटल के लिए इस्तेमाल की जाने वाली टेक्स्ट की स्टाइल. Charts.newTextStyle() पर कॉल करके, TextStyleBuilder ऑब्जेक्ट बनाया जा सकता है. |
वापसी का टिकट
ColumnChartBuilder — यह बिल्डर, चेन बनाने में मदद करता है.
setXAxisTextStyle(textStyle)
हॉरिज़ॉन्टल ऐक्सिस टेक्स्ट की स्टाइल सेट करता है.
// Creates a line chart builder and sets the X-axis text style to blue, 18-point font.
var textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build();
var builder = Charts.newLineChart();
builder.setXAxisTextStyle(textStyle);
पैरामीटर
| नाम | टाइप | ब्यौरा |
|---|---|---|
textStyle | TextStyle | हॉरिज़ॉन्टल ऐक्सिस टाइटल के लिए इस्तेमाल की जाने वाली टेक्स्ट स्टाइल. Charts.newTextStyle() पर कॉल करके, TextStyleBuilder ऑब्जेक्ट बनाया जा सकता है. |
वापसी का टिकट
ColumnChartBuilder — यह बिल्डर, चेन बनाने में मदद करता है.
setXAxisTitle(title)
हॉरिज़ॉन्टल ऐक्सिस पर टाइटल जोड़ता है. शीर्षक बीच में है और ऐक्सिस की वैल्यू के नीचे दिखता है लेबल.
// Creates a line chart builder and sets the X-axis title.
var builder = Charts.newLineChart();
builder.setTitle('X-axis Title')
पैरामीटर
| नाम | टाइप | ब्यौरा |
|---|---|---|
title | String | X-ऐक्सिस का टाइटल. |
वापसी का टिकट
ColumnChartBuilder — यह बिल्डर, चेन बनाने में मदद करता है.
setXAxisTitleTextStyle(textStyle)
हॉरिज़ॉन्टल ऐक्सिस टाइटल की टेक्स्ट स्टाइल सेट करता है.
// Creates a line chart builder and sets the X-axis title text style to blue, 18-point font.
var textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build();
var builder = Charts.newLineChart();
builder.setXAxisTitleTextStyle(textStyle);
पैरामीटर
| नाम | टाइप | ब्यौरा |
|---|---|---|
textStyle | TextStyle | हॉरिज़ॉन्टल ऐक्सिस टाइटल के लिए इस्तेमाल की जाने वाली टेक्स्ट स्टाइल. Charts.newTextStyle() पर कॉल करके, TextStyleBuilder ऑब्जेक्ट बनाया जा सकता है. |
वापसी का टिकट
ColumnChartBuilder — यह बिल्डर, चेन बनाने में मदद करता है.
setYAxisTextStyle(textStyle)
वर्टिकल ऐक्सिस टेक्स्ट की स्टाइल सेट करता है.
// Creates a line chart builder and sets the Y-axis text style to blue, 18-point font.
var textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build();
var builder = Charts.newLineChart();
builder.setYAxisTextStyle(textStyle);
पैरामीटर
| नाम | टाइप | ब्यौरा |
|---|---|---|
textStyle | TextStyle | हॉरिज़ॉन्टल ऐक्सिस टाइटल के लिए इस्तेमाल की जाने वाली टेक्स्ट स्टाइल. Charts.newTextStyle() पर कॉल करके, TextStyleBuilder ऑब्जेक्ट बनाया जा सकता है. |
वापसी का टिकट
ColumnChartBuilder — यह बिल्डर, चेन बनाने में मदद करता है.
setYAxisTitle(title)
लंबवत अक्ष में शीर्षक जोड़ता है. शीर्षक बीच में है और मान की बाईं ओर दिखता है लेबल.
// Creates a line chart builder and sets the Y-axis title.
var builder = Charts.newLineChart();
builder.setYAxisTitle('Y-axis Title')
पैरामीटर
| नाम | टाइप | ब्यौरा |
|---|---|---|
title | String | Y-ऐक्सिस का टाइटल. |
वापसी का टिकट
ColumnChartBuilder — यह बिल्डर, चेन बनाने में मदद करता है.
setYAxisTitleTextStyle(textStyle)
वर्टिकल ऐक्सिस के टाइटल की टेक्स्ट स्टाइल सेट करता है.
// Creates a line chart builder and sets the Y-axis title text style to blue, 18-point font.
var textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build();
var builder = Charts.newLineChart();
builder.setYAxisTitleTextStyle(textStyle);
पैरामीटर
| नाम | टाइप | ब्यौरा |
|---|---|---|
textStyle | TextStyle | हॉरिज़ॉन्टल ऐक्सिस टाइटल के लिए इस्तेमाल की जाने वाली टेक्स्ट स्टाइल. Charts.newTextStyle() पर कॉल करके, TextStyleBuilder ऑब्जेक्ट बनाया जा सकता है. |
वापसी का टिकट
ColumnChartBuilder — यह बिल्डर, चेन बनाने में मदद करता है.
useLogScale()
रेंज ऐक्सिस को लॉगारिद्मिक स्केल में बनाता है (सभी वैल्यू का पॉज़िटिव होना ज़रूरी है). रेंज ऐक्सिस, वर्टिकल चार्ट (जैसे कि लाइन, एरिया या कॉलम) के लिए वर्टिकल ऐक्सिस होते हैं और हॉरिज़ॉन्टल चार्ट (जैसे कि बार) के लिए हॉरिज़ॉन्टल ऐक्सिस.
वापसी का टिकट
ColumnChartBuilder — यह बिल्डर, चेन बनाने में मदद करता है.