Class AreaChartBuilder

AreaChartBuilder

เครื่องมือสร้างแผนภูมิพื้นที่ โปรดดูรายละเอียดเพิ่มเติมในเอกสารประกอบ 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");

พารามิเตอร์

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

พารามิเตอร์

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

รีเทิร์น

AreaChartBuilder — เครื่องมือสร้างนี้เหมาะสำหรับการทำห่วงโซ่


setDataSourceUrl(url)

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

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

พารามิเตอร์

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

พารามิเตอร์

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

รีเทิร์น

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

พารามิเตอร์

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

รีเทิร์น

AreaChartBuilder — เครื่องมือสร้างนี้เหมาะสำหรับการทำห่วงโซ่


setPointStyle(style)

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

// Creates a line chart builder and sets large point style.
var 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'.
var 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.
var textStyleBuilder = Charts.newTextStyle().setColor('#0000FF').setFontSize(26);
var style = textStyleBuilder.build();
var 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.
var textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build();
var builder = Charts.newLineChart();
builder.setXAxisTextStyle(textStyle);

พารามิเตอร์

ชื่อประเภทคำอธิบาย
textStyleTextStyleรูปแบบข้อความที่ใช้สำหรับชื่อแกนแนวนอน คุณสามารถสร้างออบเจ็กต์ 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')

พารามิเตอร์

ชื่อประเภทคำอธิบาย
titleStringชื่อของแกน 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);

พารามิเตอร์

ชื่อประเภทคำอธิบาย
textStyleTextStyleรูปแบบข้อความที่ใช้สำหรับชื่อแกนแนวนอน คุณสามารถสร้างออบเจ็กต์ 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);

พารามิเตอร์

ชื่อประเภทคำอธิบาย
textStyleTextStyleรูปแบบข้อความที่ใช้สำหรับชื่อแกนแนวนอน คุณสามารถสร้างออบเจ็กต์ 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')

พารามิเตอร์

ชื่อประเภทคำอธิบาย
titleStringชื่อของแกน 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);

พารามิเตอร์

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

รีเทิร์น

AreaChartBuilder — เครื่องมือสร้างนี้เหมาะสำหรับการทำห่วงโซ่


useLogScale()

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

รีเทิร์น

AreaChartBuilder — เครื่องมือสร้างนี้เหมาะสำหรับการทำห่วงโซ่