Class AreaChartBuilder

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

พารามิเตอร์

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

พารามิเตอร์

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

รีเทิร์น

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

---

setDataSourceUrl(url)

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

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

พารามิเตอร์

ชื่อ	ประเภท	คำอธิบาย
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.
const 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.
const textStyleBuilder =
    Charts.newTextStyle().setColor('#0000FF').setFontSize(26);
const style = textStyleBuilder.build();
const builder = Charts.newLineChart();
builder.setLegendTextStyle(style);

พารามิเตอร์

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

รีเทิร์น

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

พารามิเตอร์

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

รีเทิร์น

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

---

setPointStyle(style)

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

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

พารามิเตอร์

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

รีเทิร์น

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

ดูเพิ่มเติม

• PointStyle

---

setRange(start, end)

กำหนดช่วงสำหรับแผนภูมิ

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

พารามิเตอร์

ชื่อ	ประเภท	คำอธิบาย
start	Number	ค่าสำหรับเส้นตารางล่างสุดของแกนช่วง
end	Number	ค่าสำหรับเส้นตารางสูงสุดของแกนช่วง

รีเทิร์น

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

พารามิเตอร์

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

รีเทิร์น

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

พารามิเตอร์

ชื่อ	ประเภท	คำอธิบาย
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.
const textStyle =
    Charts.newTextStyle().setColor('blue').setFontSize(18).build();
const 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.
const 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.
const textStyle =
    Charts.newTextStyle().setColor('blue').setFontSize(18).build();
const 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.
const textStyle =
    Charts.newTextStyle().setColor('blue').setFontSize(18).build();
const 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.
const 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.
const textStyle =
    Charts.newTextStyle().setColor('blue').setFontSize(18).build();
const builder = Charts.newLineChart();
builder.setYAxisTitleTextStyle(textStyle);

พารามิเตอร์

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

รีเทิร์น

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

---

useLogScale()

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

รีเทิร์น

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