Data ऑब्जेक्ट के लिए बिल्डर.
यहां बिल्डर का इस्तेमाल करने का उदाहरण दिया गया है. डेटा को Google स्प्रेडशीट से इंपोर्ट किया गया हो.
function doGet() {
// This example creates two table charts side by side. One uses a data view
// definition to restrict the number of displayed columns.
// Get sample data from a spreadsheet.
const dataSourceUrl = 'https://docs.google.com/spreadsheet/tq?range=A1%3AF' +
'&key=0Aq4s9w_HxMs7dHpfX05JdmVSb1FpT21sbXd4NVE3UEE&gid=4&headers=-1';
// Create a chart to display all of the data.
const originalChart = Charts.newTableChart()
.setDimensions(600, 500)
.setDataSourceUrl(dataSourceUrl)
.build();
// Create another chart to display a subset of the data (only columns 1 and
// 4).
const dataViewDefinition = Charts.newDataViewDefinition().setColumns([0, 3]);
const limitedChart = Charts.newTableChart()
.setDimensions(200, 500)
.setDataSourceUrl(dataSourceUrl)
.setDataViewDefinition(dataViewDefinition)
.build();
const htmlOutput = HtmlService.createHtmlOutput();
const originalChartData = Utilities.base64Encode(
originalChart.getAs('image/png').getBytes(),
);
const originalChartUrl =
`data:image/png;base64,${encodeURI(originalChartData)}`;
const limitedChartData = Utilities.base64Encode(
limitedChart.getAs('image/png').getBytes(),
);
const limitedChartUrl =
`data:image/png;base64,${encodeURI(limitedChartData)}`;
htmlOutput.append('<table><tr><td>');
htmlOutput.append(`<img border="1" src="${originalChartUrl}">`);
htmlOutput.append('</td><td>');
htmlOutput.append(`<img border="1" src="${limitedChartUrl}">`);
htmlOutput.append('</td></tr></table>');
return htmlOutput;
}
तरीके
| तरीका | रिटर्न टाइप | संक्षिप्त विवरण |
|---|---|---|
build() | Data | इस बिल्डर का इस्तेमाल करके बनाया गया डेटा व्यू डेफ़िनिशन ऑब्जेक्ट बनाता है और उसे दिखाता है. |
set | Data | डेटा व्यू में शामिल करने के लिए, कॉलम के इंडेक्स सेट करता है. साथ ही, कॉलम की भूमिका की जानकारी भी देता है. |
ज़्यादा जानकारी वाला दस्तावेज़
build()
इस बिल्डर का इस्तेमाल करके बनाया गया डेटा व्यू डेफ़िनिशन ऑब्जेक्ट बनाता है और उसे दिखाता है.
वापसी का टिकट
Data — डेटा व्यू की परिभाषा वाला ऑब्जेक्ट, जिसे इस बिल्डर का इस्तेमाल करके बनाया गया था.
set
डेटा व्यू में शामिल करने के लिए, कॉलम के इंडेक्स सेट करता है. साथ ही, कॉलम की भूमिका की जानकारी भी देता है. कॉलम इंडेक्स का यह सबसेट, डेटा सोर्स के उन कॉलम को रेफ़र करता है जिनसे डेटा व्यू लिया गया है.
कॉलम की भूमिका से पता चलता है कि उस कॉलम में मौजूद डेटा का मकसद क्या है: उदाहरण के लिए, किसी कॉलम में टूलटिप टेक्स्ट, डेटा पॉइंट के एनोटेशन या अनिश्चितता के इंडिकेटर की जानकारी देने वाला डेटा हो सकता है. ज़्यादा जानकारी के लिए, Google Charts के दस्तावेज़ में डेटा
मान लें कि A1:C3 में यह डेटा मौजूद है:
'abc', 20, 'blue'; 'def', 30, 'red'; 'ghi', 40, 'orange';यहां दिया गया कोड, एक बार चार्ट बनाता है, जिसमें हर बार का रंग अलग होता है. रंग, "भूमिका कॉलम" स्टाइल के ज़रिए असाइन किए जाते हैं.
const COLUMN_SPEC = [
0, // categories
1, // counts
{sourceColumn: 2, role: 'style'},
];
function roleColumnChart() {
const spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
const sheet = spreadsheet.getActiveSheet();
const viewSpec =
Charts.newDataViewDefinition().setColumns(COLUMN_SPEC).build();
const chartBuilder = sheet.newChart()
.setChartType(Charts.ChartType.BAR)
.setDataViewDefinition(viewSpec)
.setOption('useFirstColumnAsDomain', true)
.setPosition(5, 1, 0, 0)
.setOption('hAxis', {title: 'Counts'})
.setOption('vAxis', {title: 'Categories'})
.addRange(sheet.getRange('A1:C3'));
sheet.insertChart(chartBuilder.build());
}
पैरामीटर
| नाम | टाइप | ब्यौरा |
|---|---|---|
columns | Object[] | डेटा व्यू में शामिल करने के लिए, कॉलम इंडेक्स या कॉलम की जानकारी (ऑब्जेक्ट) का ऐरे. कॉलम की जानकारी से, कॉलम की भूमिका के बारे में पता चलता है. डेटा टेबल और डेटा व्यू कॉलम के लिए, एनोटेशन शून्य पर आधारित होता है. |
वापसी का टिकट
Data — यह बिल्डर, चेन करने के लिए काम का है.