เครื่องมือสร้างแผนภูมิพื้นที่ โปรดดูรายละเอียดเพิ่มเติมในเอกสารประกอบ Google แผนภูมิ
ตัวอย่างการสร้างแผนภูมิพื้นที่มีดังนี้
// Create a data table with some sample data. var 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(); var chart = Charts.newAreaChart() .setTitle('Yearly Spending') .setXAxisTitle('Month') .setYAxisTitle('Spending (USD)') .setDimensions(600, 500) .setStacked() .setColors(['red', 'green']) .setDataTable(sampleData) .build();
เมธอด
วิธีการ | ประเภทการแสดงผล | รายละเอียดแบบย่อ |
---|---|---|
build() | Chart | สร้างแผนภูมิ |
reverseCategories() | AreaChartBuilder | กลับการวาดอนุกรมในแกนโดเมน |
setBackgroundColor(cssValue) | AreaChartBuilder | กำหนดสีพื้นหลังของแผนภูมิ |
setColors(cssValues) | AreaChartBuilder | ตั้งค่าสีสำหรับเส้นในแผนภูมิ |
setDataSourceUrl(url) | AreaChartBuilder | ตั้งค่า URL ของแหล่งข้อมูลที่ใช้เพื่อดึงข้อมูลจากแหล่งที่มาภายนอก เช่น Google ชีต |
setDataTable(tableBuilder) | AreaChartBuilder | ตั้งค่าตารางข้อมูลที่จะใช้กับแผนภูมิโดยใช้ DataTableBuilder |
setDataTable(table) | AreaChartBuilder | ตั้งค่าตารางข้อมูลที่มีเส้นสำหรับแผนภูมิ และป้ายกำกับแกน X |
setDataViewDefinition(dataViewDefinition) | AreaChartBuilder | ตั้งค่าคำจำกัดความของมุมมองข้อมูลที่จะใช้กับแผนภูมิ |
setDimensions(width, height) | AreaChartBuilder | ตั้งค่ามิติข้อมูลสำหรับแผนภูมิ |
setLegendPosition(position) | AreaChartBuilder | กำหนดตำแหน่งของคำอธิบายตามแผนภูมิ |
setLegendTextStyle(textStyle) | AreaChartBuilder | ตั้งค่ารูปแบบข้อความของคำอธิบายแผนภูมิ |
setOption(option, value) | AreaChartBuilder | ตั้งค่าตัวเลือกขั้นสูงสำหรับแผนภูมินี้ |
setPointStyle(style) | AreaChartBuilder | ตั้งค่ารูปแบบสำหรับจุดในเส้น |
setRange(start, end) | AreaChartBuilder | กำหนดช่วงสำหรับแผนภูมิ |
setStacked() | AreaChartBuilder | ใช้เส้นแบบซ้อน หมายความว่าค่าของเส้นและแท่งซ้อนทับกัน (สะสม) |
setTitle(chartTitle) | AreaChartBuilder | ตั้งชื่อแผนภูมิ |
setTitleTextStyle(textStyle) | AreaChartBuilder | ตั้งค่ารูปแบบข้อความของชื่อแผนภูมิ |
setXAxisTextStyle(textStyle) | AreaChartBuilder | ตั้งค่ารูปแบบข้อความของแกนแนวนอน |
setXAxisTitle(title) | AreaChartBuilder | เพิ่มชื่อให้กับแกนแนวนอน |
setXAxisTitleTextStyle(textStyle) | AreaChartBuilder | ตั้งค่ารูปแบบข้อความสำหรับชื่อแกนแนวนอน |
setYAxisTextStyle(textStyle) | AreaChartBuilder | ตั้งค่ารูปแบบข้อความของแกนแนวตั้ง |
setYAxisTitle(title) | AreaChartBuilder | เพิ่มชื่อให้กับแกนแนวตั้ง |
setYAxisTitleTextStyle(textStyle) | AreaChartBuilder | ตั้งค่ารูปแบบข้อความสำหรับชื่อแกนแนวตั้ง |
useLogScale() | AreaChartBuilder | ทำให้แกนช่วงเป็นสเกลลอการิทึม (ค่าทั้งหมดต้องเป็นบวก) |
เอกสารโดยละเอียด
build()
สร้างแผนภูมิ
รีเทิร์น
Chart
— ออบเจ็กต์แผนภูมิที่สามารถฝังลงในเอกสาร องค์ประกอบ UI หรือใช้เป็นแบบคงที่
รูปภาพ
reverseCategories()
กลับการวาดอนุกรมในแกนโดเมน สำหรับแผนภูมิช่วงแนวตั้ง (เช่น เส้น แผนภูมิพื้นที่หรือคอลัมน์) ซึ่งหมายความว่าแกนแนวนอนจะถูกลากจากด้านขวาไปซ้าย สำหรับ แผนภูมิช่วงแนวนอน (เช่น แผนภูมิแท่ง) หมายความว่าแกนแนวตั้งจะถูกลากจากบนลงล่าง ด้านล่าง สำหรับแผนภูมิวงกลม หมายความว่าจะมีการวาดชิ้นส่วนทวนเข็มนาฬิกา
// Creates a pie chart builder and sets drawing of the slices in a counter-clockwise manner. var builder = Charts.newPieChart(); builder.reverseCategories();
รีเทิร์น
AreaChartBuilder
— เครื่องมือสร้างนี้เหมาะสำหรับการทำห่วงโซ่
setBackgroundColor(cssValue)
กำหนดสีพื้นหลังของแผนภูมิ
// Creates a line chart builder and sets the background color to gray var builder = Charts.newLineChart(); builder.setBackgroundColor("gray");
พารามิเตอร์
ชื่อ | ประเภท | คำอธิบาย |
---|---|---|
cssValue | String | ค่า CSS สำหรับสี (เช่น "blue" หรือ "#00f" ) |
รีเทิร์น
AreaChartBuilder
— เครื่องมือสร้างนี้เหมาะสำหรับการทำห่วงโซ่
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[] | อาร์เรย์ของค่า CSS สี เช่น ["red", "#acf"] องค์ประกอบที่ n
ในอาร์เรย์จะแสดงสีของเส้นที่ n ในแผนภูมิ |
รีเทิร์น
AreaChartBuilder
— เครื่องมือสร้างนี้เหมาะสำหรับการทำห่วงโซ่
setDataSourceUrl(url)
ตั้งค่า URL ของแหล่งข้อมูลที่ใช้เพื่อดึงข้อมูลจากแหล่งที่มาภายนอก เช่น Google ชีต หากมีการระบุ URL แหล่งข้อมูลและ DataTable ระบบจะไม่สนใจ URL ของแหล่งข้อมูล
โปรดดูข้อมูลเพิ่มเติมเกี่ยวกับการค้นหาแหล่งข้อมูลในเอกสารประกอบ Google แผนภูมิ
พารามิเตอร์
ชื่อ | ประเภท | คำอธิบาย |
---|---|---|
url | String | URL แหล่งข้อมูล รวมถึงพารามิเตอร์การค้นหา |
รีเทิร์น
AreaChartBuilder
— เครื่องมือสร้างนี้เหมาะสำหรับการทำห่วงโซ่
setDataTable(tableBuilder)
ตั้งค่าตารางข้อมูลที่จะใช้กับแผนภูมิโดยใช้ DataTableBuilder นี่คือวิธีอำนวยความสะดวก
สำหรับการตั้งค่าตารางข้อมูลโดยไม่ต้องเรียกใช้ build()
พารามิเตอร์
ชื่อ | ประเภท | คำอธิบาย |
---|---|---|
tableBuilder | DataTableBuilder | เครื่องมือสร้างตารางข้อมูล ตารางข้อมูลใหม่จะสร้างขึ้นทันทีซึ่งเป็นส่วนหนึ่งของการทำงานนี้ ดังนั้น การอัปเดตเครื่องมือสร้างเพิ่มเติมจะไม่แสดงในแผนภูมิ |
รีเทิร์น
AreaChartBuilder
— เครื่องมือสร้างนี้เหมาะสำหรับการทำห่วงโซ่
setDataTable(table)
ตั้งค่าตารางข้อมูลที่มีเส้นสำหรับแผนภูมิ และป้ายกำกับแกน X คอลัมน์แรกควรเป็นสตริงและมีป้ายกำกับของแกนแนวนอน กี่คอลัมน์ก็ได้ สามารถติดตามได้ ทั้งหมดต้องเป็นตัวเลข แต่ละคอลัมน์จะแสดงเป็นเส้นแยกจากกัน
พารามิเตอร์
ชื่อ | ประเภท | คำอธิบาย |
---|---|---|
table | DataTableSource | ตารางข้อมูลที่ใช้สำหรับแผนภูมิ |
รีเทิร์น
AreaChartBuilder
— เครื่องมือสร้างนี้เหมาะสำหรับการทำห่วงโซ่
setDataViewDefinition(dataViewDefinition)
ตั้งค่าคำจำกัดความของมุมมองข้อมูลที่จะใช้กับแผนภูมิ
พารามิเตอร์
ชื่อ | ประเภท | คำอธิบาย |
---|---|---|
dataViewDefinition | DataViewDefinition | ออบเจ็กต์คำจำกัดความของมุมมองข้อมูลที่กำหนดข้อมูลพร็อพเพอร์ตี้ที่ควรอยู่ ได้มาจากแหล่งข้อมูลที่กำหนดสำหรับการวาดแผนภูมิ |
รีเทิร์น
AreaChartBuilder
— เครื่องมือสร้างนี้เหมาะสำหรับการทำห่วงโซ่
setDimensions(width, height)
ตั้งค่ามิติข้อมูลสำหรับแผนภูมิ
พารามิเตอร์
ชื่อ | ประเภท | คำอธิบาย |
---|---|---|
width | Integer | ความกว้างของแผนภูมิเป็นพิกเซล |
height | Integer | ความสูงของแผนภูมิในหน่วยพิกเซล |
รีเทิร์น
AreaChartBuilder
— เครื่องมือสร้างนี้เหมาะสำหรับการทำห่วงโซ่
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 | ตำแหน่งของคำอธิบาย |
รีเทิร์น
AreaChartBuilder
— เครื่องมือสร้างนี้เหมาะสำหรับการทำห่วงโซ่
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 | รูปแบบข้อความที่ใช้สำหรับคำอธิบายแผนภูมิ |
รีเทิร์น
AreaChartBuilder
— เครื่องมือสร้างนี้เหมาะสำหรับการทำห่วงโซ่
setOption(option, value)
ตั้งค่าตัวเลือกขั้นสูงสำหรับแผนภูมินี้ ดูตัวเลือกที่ใช้ได้กับ แผนภูมินี้ วิธีการนี้จะไม่มีผลหากตัวเลือกที่ระบุไม่ถูกต้อง
// Build an area chart with a 1-second animation duration. var builder = Charts.newAreaChart(); builder.setOption('animation.duration', 1000); var chart = builder.build();
พารามิเตอร์
ชื่อ | ประเภท | คำอธิบาย |
---|---|---|
option | String | ตัวเลือกที่จะตั้งค่า |
value | Object | ค่าที่ต้องกำหนด |
รีเทิร์น
AreaChartBuilder
— เครื่องมือสร้างนี้เหมาะสำหรับการทำห่วงโซ่
setPointStyle(style)
ตั้งค่ารูปแบบสำหรับจุดในเส้น โดยค่าเริ่มต้น จุดจะไม่มีรูปแบบเฉพาะ และมีเพียง เส้นนั้นจะปรากฏ
// Creates a line chart builder and sets large point style. var builder = Charts.newLineChart(); builder.setPointStyle(Charts.PointStyle.LARGE);
พารามิเตอร์
ชื่อ | ประเภท | คำอธิบาย |
---|---|---|
style | PointStyle | รูปแบบที่ใช้สำหรับจุดในเส้น |
รีเทิร์น
AreaChartBuilder
— เครื่องมือสร้างนี้เหมาะสำหรับการทำห่วงโซ่
ดูเพิ่มเติม
setRange(start, end)
กำหนดช่วงสำหรับแผนภูมิ
หากจุดข้อมูลใดๆ อยู่นอกช่วง ช่วงดังกล่าวจะขยายเพื่อรวมข้อมูลดังกล่าว คะแนน
พารามิเตอร์
ชื่อ | ประเภท | คำอธิบาย |
---|---|---|
start | Number | ค่าสำหรับเส้นตารางต่ำสุดของแกนช่วง |
end | Number | ค่าสำหรับเส้นตารางสูงสุดของแกนช่วง |
รีเทิร์น
AreaChartBuilder
— เครื่องมือสร้างนี้เหมาะสำหรับการทำห่วงโซ่
setStacked()
ใช้เส้นแบบซ้อน หมายความว่าค่าของเส้นและแท่งซ้อนทับกัน (สะสม) โดยค่าเริ่มต้น จะไม่มีการซ้อนใดๆ
รีเทิร์น
AreaChartBuilder
— เครื่องมือสร้างนี้เหมาะสำหรับการทำห่วงโซ่
setTitle(chartTitle)
ตั้งชื่อแผนภูมิ ชื่อจะแสดงตรงกลางเหนือแผนภูมิ
// Creates a line chart builder and title to 'My Line Chart'. var builder = Charts.newLineChart(); builder.setTitle('My Line Chart')
พารามิเตอร์
ชื่อ | ประเภท | คำอธิบาย |
---|---|---|
chartTitle | String | ชื่อแผนภูมิ |
รีเทิร์น
AreaChartBuilder
— เครื่องมือสร้างนี้เหมาะสำหรับการทำห่วงโซ่
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 | รูปแบบข้อความที่ใช้สำหรับชื่อแผนภูมิ คุณสามารถสร้างออบเจ็กต์ TextStyleBuilder ได้โดยเรียกใช้ Charts.newTextStyle() |
รีเทิร์น
AreaChartBuilder
— เครื่องมือสร้างนี้เหมาะสำหรับการทำห่วงโซ่
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 | รูปแบบข้อความที่ใช้สำหรับชื่อแกนแนวนอน คุณสามารถสร้างออบเจ็กต์ TextStyleBuilder ได้โดยเรียกใช้ Charts.newTextStyle() |
รีเทิร์น
AreaChartBuilder
— เครื่องมือสร้างนี้เหมาะสำหรับการทำห่วงโซ่
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 |
รีเทิร์น
AreaChartBuilder
— เครื่องมือสร้างนี้เหมาะสำหรับการทำห่วงโซ่
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 | รูปแบบข้อความที่ใช้สำหรับชื่อแกนแนวนอน คุณสามารถสร้างออบเจ็กต์ TextStyleBuilder ได้โดยเรียกใช้ Charts.newTextStyle() |
รีเทิร์น
AreaChartBuilder
— เครื่องมือสร้างนี้เหมาะสำหรับการทำห่วงโซ่
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 | รูปแบบข้อความที่ใช้สำหรับชื่อแกนแนวนอน คุณสามารถสร้างออบเจ็กต์ TextStyleBuilder ได้โดยเรียกใช้ Charts.newTextStyle() |
รีเทิร์น
AreaChartBuilder
— เครื่องมือสร้างนี้เหมาะสำหรับการทำห่วงโซ่
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 |
รีเทิร์น
AreaChartBuilder
— เครื่องมือสร้างนี้เหมาะสำหรับการทำห่วงโซ่
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 | รูปแบบข้อความที่ใช้สำหรับชื่อแกนแนวนอน คุณสามารถสร้างออบเจ็กต์ TextStyleBuilder ได้โดยเรียกใช้ Charts.newTextStyle() |
รีเทิร์น
AreaChartBuilder
— เครื่องมือสร้างนี้เหมาะสำหรับการทำห่วงโซ่
useLogScale()
ทำให้แกนช่วงเป็นสเกลลอการิทึม (ค่าทั้งหมดต้องเป็นบวก) ช่วง แกน คือแกนแนวตั้งสำหรับแผนภูมิแนวตั้ง (เช่น เส้น พื้นที่ หรือคอลัมน์) และ แกนแนวนอนสำหรับแผนภูมิแนวนอน (เช่น แท่ง)
รีเทิร์น
AreaChartBuilder
— เครื่องมือสร้างนี้เหมาะสำหรับการทำห่วงโซ่