หน้านี้ได้รับการแปลโดย Cloud Translation API

Class ColumnChartBuilder

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

ตัวอย่างนี้แสดงวิธีสร้างแผนภูมิคอลัมน์ด้วยข้อมูลจากตารางข้อมูล

var sampleData = Charts.newDataTable()
    .addColumn(Charts.ColumnType.STRING, "Year")
    .addColumn(Charts.ColumnType.NUMBER, "Sales")
    .addColumn(Charts.ColumnType.NUMBER, "Expenses")
    .addRow(["2004", 1000, 400])
    .addRow(["2005", 1170, 460])
    .addRow(["2006", 660, 1120])
    .addRow(["2007", 1030, 540])
    .addRow(["2008", 800, 600])
    .addRow(["2009", 943, 678])
    .addRow(["2010", 1020, 550])
    .addRow(["2011", 910, 700])
    .addRow(["2012", 1230, 840])
    .build();

var chart = Charts.newColumnChart()
    .setTitle('Sales & Expenses')
    .setXAxisTitle('Year')
    .setYAxisTitle('Amount (USD)')
    .setDimensions(600, 500)
    .setDataTable(sampleData)
    .build();

เมธอด

วิธีการ	ประเภทการแสดงผล	รายละเอียดแบบย่อ
`build()`	`Chart`	สร้างแผนภูมิ
`reverseCategories()`	`ColumnChartBuilder`	กลับการวาดอนุกรมในแกนโดเมน
`setBackgroundColor(cssValue)`	`ColumnChartBuilder`	กำหนดสีพื้นหลังของแผนภูมิ
`setColors(cssValues)`	`ColumnChartBuilder`	ตั้งค่าสีสำหรับเส้นในแผนภูมิ
`setDataSourceUrl(url)`	`ColumnChartBuilder`	ตั้งค่า URL ของแหล่งข้อมูลที่ใช้เพื่อดึงข้อมูลจากแหล่งที่มาภายนอก เช่น Google ชีต
`setDataTable(tableBuilder)`	`ColumnChartBuilder`	ตั้งค่าตารางข้อมูลที่จะใช้กับแผนภูมิโดยใช้ DataTableBuilder
`setDataTable(table)`	`ColumnChartBuilder`	ตั้งค่าตารางข้อมูลที่มีเส้นสำหรับแผนภูมิ และป้ายกำกับแกน X
`setDataViewDefinition(dataViewDefinition)`	`ColumnChartBuilder`	ตั้งค่าคำจำกัดความของมุมมองข้อมูลที่จะใช้กับแผนภูมิ
`setDimensions(width, height)`	`ColumnChartBuilder`	ตั้งค่ามิติข้อมูลสำหรับแผนภูมิ
`setLegendPosition(position)`	`ColumnChartBuilder`	กำหนดตำแหน่งของคำอธิบายตามแผนภูมิ
`setLegendTextStyle(textStyle)`	`ColumnChartBuilder`	ตั้งค่ารูปแบบข้อความของคำอธิบายแผนภูมิ
`setOption(option, value)`	`ColumnChartBuilder`	ตั้งค่าตัวเลือกขั้นสูงสำหรับแผนภูมินี้
`setRange(start, end)`	`ColumnChartBuilder`	กำหนดช่วงสำหรับแผนภูมิ
`setStacked()`	`ColumnChartBuilder`	ใช้เส้นแบบซ้อน หมายความว่าค่าของเส้นและแท่งซ้อนทับกัน (สะสม)
`setTitle(chartTitle)`	`ColumnChartBuilder`	ตั้งชื่อแผนภูมิ
`setTitleTextStyle(textStyle)`	`ColumnChartBuilder`	ตั้งค่ารูปแบบข้อความของชื่อแผนภูมิ
`setXAxisTextStyle(textStyle)`	`ColumnChartBuilder`	ตั้งค่ารูปแบบข้อความของแกนแนวนอน
`setXAxisTitle(title)`	`ColumnChartBuilder`	เพิ่มชื่อให้กับแกนแนวนอน
`setXAxisTitleTextStyle(textStyle)`	`ColumnChartBuilder`	ตั้งค่ารูปแบบข้อความสำหรับชื่อแกนแนวนอน
`setYAxisTextStyle(textStyle)`	`ColumnChartBuilder`	ตั้งค่ารูปแบบข้อความของแกนแนวตั้ง
`setYAxisTitle(title)`	`ColumnChartBuilder`	เพิ่มชื่อให้กับแกนแนวตั้ง
`setYAxisTitleTextStyle(textStyle)`	`ColumnChartBuilder`	ตั้งค่ารูปแบบข้อความสำหรับชื่อแกนแนวตั้ง
`useLogScale()`	`ColumnChartBuilder`	ทำให้แกนช่วงเป็นสเกลลอการิทึม (ค่าทั้งหมดต้องเป็นบวก)

เอกสารโดยละเอียด

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

รีเทิร์น

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

`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"`)

รีเทิร์น

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

`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 ในแผนภูมิ

รีเทิร์น

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

`setDataSourceUrl(url)`

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

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

พารามิเตอร์

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

รีเทิร์น

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

`setDataTable(tableBuilder)`

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

พารามิเตอร์

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

รีเทิร์น

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

`setDataTable(table)`

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

พารามิเตอร์

ชื่อ	ประเภท	คำอธิบาย
`table`	`DataTableSource`	ตารางข้อมูลที่ใช้สำหรับแผนภูมิ

รีเทิร์น

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

`setDataViewDefinition(dataViewDefinition)`

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

พารามิเตอร์

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

รีเทิร์น

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

`setDimensions(width, height)`

ตั้งค่ามิติข้อมูลสำหรับแผนภูมิ

พารามิเตอร์

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

รีเทิร์น

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

`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`	ตำแหน่งของคำอธิบาย

รีเทิร์น

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

`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`	รูปแบบข้อความที่ใช้สำหรับคำอธิบายแผนภูมิ

รีเทิร์น

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

`setOption(option, value)`

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

// Build a column chart with a 1-second animation duration.
var builder = Charts.newColumnChart();
builder.setOption('animation.duration', 1000);
var chart = builder.build();

พารามิเตอร์

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

รีเทิร์น

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

`setRange(start, end)`

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

หากจุดข้อมูลใดๆ อยู่นอกช่วง ช่วงดังกล่าวจะขยายเพื่อรวมข้อมูลดังกล่าว คะแนน

พารามิเตอร์

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

รีเทิร์น

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

`setStacked()`

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

รีเทิร์น

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

`setTitle(chartTitle)`

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

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

พารามิเตอร์

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

รีเทิร์น

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

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

รีเทิร์น

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

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

รีเทิร์น

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

`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

รีเทิร์น

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

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

รีเทิร์น

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

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

รีเทิร์น

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

`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

รีเทิร์น

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

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

รีเทิร์น

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

`useLogScale()`

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

รีเทิร์น

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