Class AreaChartBuilder

เครื่องมือสร้างแผนภูมิพื้นที่

ตัวสร้างแผนภูมิพื้นที่ ดูรายละเอียดเพิ่มเติมได้ที่เอกสารประกอบของ 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สร้างแผนภูมิ
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.
const builder = Charts.newPieChart();
builder.reverseCategories();

รีเทิร์น

AreaChartBuilder — ตัวสร้างนี้มีประโยชน์สำหรับการต่อเชื่อม

setBackgroundColor(cssValue)

กำหนดสีพื้นหลังให้กับแผนภูมิ 

// Creates a line chart builder and sets the background color to gray
const builder = Charts.newLineChart();
builder.setBackgroundColor('gray');

พารามิเตอร์

ชื่อประเภทคำอธิบาย
cssValueStringค่า 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.
const builder = Charts.newLineChart();
builder.setColors(['green', 'red']);

พารามิเตอร์

ชื่อประเภทคำอธิบาย
cssValuesString[]อาร์เรย์ของค่า CSS สี เช่น ["red", "#acf"] องค์ประกอบที่ n ในอาร์เรย์แสดงสีของเส้นที่ n ในแผนภูมิ

รีเทิร์น

AreaChartBuilder — ตัวสร้างนี้มีประโยชน์สำหรับการต่อเชื่อม

setDataSourceUrl(url)

ตั้งค่า URL แหล่งข้อมูลที่ใช้ในการดึงข้อมูลจากแหล่งข้อมูลภายนอก เช่น Google ชีต หากระบุ URL ของแหล่งข้อมูลและ DataTable ระบบจะไม่สนใจ URL ของแหล่งข้อมูล

ดูข้อมูลเพิ่มเติมเกี่ยวกับการค้นหาแหล่งข้อมูลได้ในเอกสารประกอบของ Google Charts

พารามิเตอร์

ชื่อประเภทคำอธิบาย
urlStringURL ของแหล่งข้อมูล รวมถึงพารามิเตอร์การค้นหา

รีเทิร์น

AreaChartBuilder — ตัวสร้างนี้มีประโยชน์สำหรับการต่อเชื่อม

setDataTable(tableBuilder)

ตั้งค่าตารางข้อมูลที่จะใช้กับแผนภูมิโดยใช้ DataTableBuilder นี่เป็นเมธอดที่สะดวกสำหรับการตั้งค่าตารางข้อมูลโดยไม่ต้องเรียก build()

พารามิเตอร์

ชื่อประเภทคำอธิบาย
tableBuilderDataTableBuilderเครื่องมือสร้างตารางข้อมูล ระบบจะสร้างตารางข้อมูลใหม่ทันทีเป็นส่วนหนึ่งของการเรียกใช้นี้ ดังนั้นการอัปเดตเครื่องมือสร้างเพิ่มเติมจะไม่แสดงในแผนภูมิ

รีเทิร์น

AreaChartBuilder — ตัวสร้างนี้มีประโยชน์สำหรับการต่อเชื่อม

setDataTable(table)

ตั้งค่าตารางข้อมูลซึ่งมีเส้นสำหรับแผนภูมิ รวมถึงป้ายกำกับแกน X คอลัมน์แรกควรเป็นสตริงและมีป้ายกำกับแกนนอน ตามด้วยคอลัมน์จำนวนเท่าใดก็ได้ โดยคอลัมน์ทั้งหมดต้องเป็นตัวเลข แต่ละคอลัมน์จะแสดงเป็นเส้นแยกกัน

พารามิเตอร์

ชื่อประเภทคำอธิบาย
tableDataTableSourceตารางข้อมูลที่จะใช้กับแผนภูมิ

รีเทิร์น

AreaChartBuilder — ตัวสร้างนี้มีประโยชน์สำหรับการต่อเชื่อม

setDataViewDefinition(dataViewDefinition)

กำหนดคำจำกัดความของมุมมองข้อมูลที่จะใช้สําหรับแผนภูมิ

พารามิเตอร์

ชื่อประเภทคำอธิบาย
dataViewDefinitionDataViewDefinitionออบเจ็กต์คําจํากัดความมุมมองข้อมูลที่กําหนดมุมมองที่ควรมาจากแหล่งข้อมูลหนึ่งๆ สําหรับการวาดแผนภูมิ

รีเทิร์น

AreaChartBuilder — ตัวสร้างนี้มีประโยชน์สำหรับการต่อเชื่อม

setDimensions(width, height)

กำหนดมิติข้อมูลของแผนภูมิ

พารามิเตอร์

ชื่อประเภทคำอธิบาย
widthIntegerความกว้างของแผนภูมิในหน่วยพิกเซล
heightIntegerความสูงของแผนภูมิในหน่วยพิกเซล

รีเทิร์น

AreaChartBuilder — ตัวสร้างนี้มีประโยชน์สำหรับการต่อเชื่อม

setLegendPosition(position)

กำหนดตำแหน่งของคำอธิบายประกอบตามแผนภูมิ โดยค่าเริ่มต้นจะไม่มีคำอธิบาย 

// Creates a line chart builder and sets the legend position to right.
const builder = Charts.newLineChart();
builder.setLegendPosition(Charts.Position.RIGHT);

พารามิเตอร์

ชื่อประเภทคำอธิบาย
positionPositionตําแหน่งของคําอธิบาย

รีเทิร์น

AreaChartBuilder — ตัวสร้างนี้มีประโยชน์สำหรับการต่อเชื่อม

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);

พารามิเตอร์

ชื่อประเภทคำอธิบาย
textStyleTextStyleรูปแบบข้อความที่จะใช้สำหรับคำอธิบายแผนภูมิ

รีเทิร์น

AreaChartBuilder — ตัวสร้างนี้มีประโยชน์สำหรับการต่อเชื่อม

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();

พารามิเตอร์

ชื่อประเภทคำอธิบาย
optionStringตัวเลือกที่จะตั้งค่า
valueObjectค่าที่จะตั้ง

รีเทิร์น

AreaChartBuilder — ตัวสร้างนี้มีประโยชน์สำหรับการต่อเชื่อม

setPointStyle(style)

กำหนดสไตล์สำหรับจุดในเส้น โดยค่าเริ่มต้น จุดจะไม่มีสไตล์ใดๆ และมองเห็นได้เฉพาะเส้นเท่านั้น 

// Creates a line chart builder and sets large point style.
const builder = Charts.newLineChart();
builder.setPointStyle(Charts.PointStyle.LARGE);

พารามิเตอร์

ชื่อประเภทคำอธิบาย
stylePointStyleรูปแบบที่จะใช้กับจุดในเส้น

รีเทิร์น

AreaChartBuilder — ตัวสร้างนี้มีประโยชน์สำหรับการต่อเชื่อม

ดูเพิ่มเติม

setRange(start, end)

กําหนดช่วงของแผนภูมิ

หากจุดข้อมูลใดไม่อยู่ในช่วง ระบบจะขยายช่วงให้รวมจุดข้อมูลเหล่านั้น

พารามิเตอร์

ชื่อประเภทคำอธิบาย
startNumberค่าของเส้นตารางต่ำสุดบนแกนแนวนอน
endNumberค่าของเส้นตารางที่สูงที่สุดบนแกนช่วง

รีเทิร์น

AreaChartBuilder — ตัวสร้างนี้มีประโยชน์สำหรับการต่อเชื่อม

setStacked()

ใช้เส้นที่ซ้อนกัน ซึ่งหมายความว่าค่าเส้นและแถบจะซ้อนกัน (สะสม) โดยค่าเริ่มต้น ระบบจะไม่ซ้อน

รีเทิร์น

AreaChartBuilder — ตัวสร้างนี้มีประโยชน์สำหรับการต่อเชื่อม

setTitle(chartTitle)

ตั้งชื่อแผนภูมิ ชื่อจะแสดงอยู่ตรงกลางเหนือแผนภูมิ 

// Creates a line chart builder and title to 'My Line Chart'.
const builder = Charts.newLineChart();
builder.setTitle('My Line Chart');

พารามิเตอร์

ชื่อประเภทคำอธิบาย
chartTitleStringชื่อแผนภูมิ

รีเทิร์น

AreaChartBuilder — ตัวสร้างนี้มีประโยชน์สำหรับการต่อเชื่อม

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);

พารามิเตอร์

ชื่อประเภทคำอธิบาย
textStyleTextStyleรูปแบบข้อความที่จะใช้สำหรับชื่อแผนภูมิ คุณสร้างออบเจ็กต์ TextStyleBuilder ได้โดยเรียกใช้ Charts.newTextStyle()

รีเทิร์น

AreaChartBuilder — ตัวสร้างนี้มีประโยชน์สำหรับการต่อเชื่อม

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);

พารามิเตอร์

ชื่อประเภทคำอธิบาย
textStyleTextStyleรูปแบบข้อความที่จะใช้กับชื่อแกนนอน คุณสร้างออบเจ็กต์ TextStyleBuilder ได้โดยเรียกใช้ Charts.newTextStyle()

รีเทิร์น

AreaChartBuilder — ตัวสร้างนี้มีประโยชน์สำหรับการต่อเชื่อม

setXAxisTitle(title)

เพิ่มชื่อให้กับแกนแนวนอน ชื่อจะอยู่ตรงกลางและปรากฏใต้ป้ายกำกับค่าแกน 

// Creates a line chart builder and sets the X-axis title.
const builder = Charts.newLineChart();
builder.setTitle('X-axis Title');

พารามิเตอร์

ชื่อประเภทคำอธิบาย
titleStringชื่อแกน X

รีเทิร์น

AreaChartBuilder — ตัวสร้างนี้มีประโยชน์สำหรับการต่อเชื่อม

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);

พารามิเตอร์

ชื่อประเภทคำอธิบาย
textStyleTextStyleรูปแบบข้อความที่จะใช้กับชื่อแกนนอน คุณสร้างออบเจ็กต์ TextStyleBuilder ได้โดยเรียกใช้ Charts.newTextStyle()

รีเทิร์น

AreaChartBuilder — ตัวสร้างนี้มีประโยชน์สำหรับการต่อเชื่อม

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);

พารามิเตอร์

ชื่อประเภทคำอธิบาย
textStyleTextStyleรูปแบบข้อความที่จะใช้กับชื่อแกนนอน คุณสร้างออบเจ็กต์ TextStyleBuilder ได้โดยเรียกใช้ Charts.newTextStyle()

รีเทิร์น

AreaChartBuilder — ตัวสร้างนี้มีประโยชน์สำหรับการต่อเชื่อม

setYAxisTitle(title)

เพิ่มชื่อให้กับแกนแนวตั้ง ชื่อจะอยู่กึ่งกลางและปรากฏทางด้านซ้ายของป้ายกำกับค่า 

// Creates a line chart builder and sets the Y-axis title.
const builder = Charts.newLineChart();
builder.setYAxisTitle('Y-axis Title');

พารามิเตอร์

ชื่อประเภทคำอธิบาย
titleStringชื่อแกน Y

รีเทิร์น

AreaChartBuilder — ตัวสร้างนี้มีประโยชน์สำหรับการต่อเชื่อม

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);

พารามิเตอร์

ชื่อประเภทคำอธิบาย
textStyleTextStyleรูปแบบข้อความที่จะใช้กับชื่อแกนนอน คุณสร้างออบเจ็กต์ TextStyleBuilder ได้โดยเรียกใช้ Charts.newTextStyle()

รีเทิร์น

AreaChartBuilder — ตัวสร้างนี้มีประโยชน์สำหรับการต่อเชื่อม

useLogScale()

ทําให้แกนช่วงเป็นมาตราส่วนเชิงลําดับเลข (ค่าทั้งหมดต้องเป็นค่าบวก) แกนช่วงคือแกนแนวตั้งสําหรับแผนภูมิแนวตั้ง (เช่น เส้น พื้นที่ หรือคอลัมน์) และแกนแนวนอนสําหรับแผนภูมิแนวนอน (เช่น แท่ง)

รีเทิร์น

AreaChartBuilder — ตัวสร้างนี้มีประโยชน์สำหรับการต่อเชื่อม