เครื่องมือสร้างแผนภูมิคอลัมน์ โปรดดูรายละเอียดเพิ่มเติมในเอกสารประกอบของ Google Charts
ตัวอย่างนี้แสดงวิธีสร้างแผนภูมิคอลัมน์ที่มีข้อมูลจากตารางข้อมูล
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
— ออบเจ็กต์แผนภูมิที่สามารถฝังลงในเอกสาร, องค์ประกอบ 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");
พารามิเตอร์
ชื่อ | Type | คำอธิบาย |
---|---|---|
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"]);
พารามิเตอร์
ชื่อ | Type | คำอธิบาย |
---|---|---|
cssValues | String[] | อาร์เรย์ของค่า CSS สี เช่น ["red", "#acf"] องค์ประกอบที่ n ในอาร์เรย์จะแสดงสีของเส้นที่ n ในแผนภูมิ |
รีเทิร์น
ColumnChartBuilder
— เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
setDataSourceUrl(url)
ตั้งค่า URL ของแหล่งข้อมูลที่ใช้เพื่อดึงข้อมูลเข้ามาจากแหล่งที่มาภายนอก เช่น Google ชีต หากมี URL แหล่งข้อมูลและ DataTable ไว้ ระบบจะไม่สนใจ URL ของแหล่งข้อมูล
ดูข้อมูลเพิ่มเติมเกี่ยวกับการค้นหาแหล่งข้อมูลได้ในเอกสารประกอบของ Google Charts
พารามิเตอร์
ชื่อ | Type | คำอธิบาย |
---|---|---|
url | String | URL แหล่งข้อมูล รวมถึงพารามิเตอร์การค้นหา |
รีเทิร์น
ColumnChartBuilder
— เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
setDataTable(tableBuilder)
ตั้งค่าตารางข้อมูลที่จะใช้สำหรับแผนภูมิโดยใช้ DataTableBuilder นี่เป็นวิธีที่สะดวกในการตั้งค่าตารางข้อมูลโดยไม่ต้องเรียกใช้ build()
พารามิเตอร์
ชื่อ | Type | คำอธิบาย |
---|---|---|
tableBuilder | DataTableBuilder | เครื่องมือสร้างตารางข้อมูล ระบบจะสร้างตารางข้อมูลใหม่ขึ้นทันทีที่เป็นส่วนหนึ่งของการเรียกนี้ ดังนั้นการอัปเดตใดๆ เพิ่มเติมของเครื่องมือสร้างจะไม่แสดงในแผนภูมิ |
รีเทิร์น
ColumnChartBuilder
— เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
setDataTable(table)
ตั้งค่าตารางข้อมูลที่มีเส้นสำหรับแผนภูมิ และป้ายกำกับแกน X คอลัมน์แรกควรเป็นสตริง และมีป้ายกำกับแกนแนวนอน หลังจากนั้นจะมีกี่คอลัมน์ก็ได้ แต่ทั้งหมดต้องเป็นตัวเลข แต่ละคอลัมน์จะแสดงเป็นเส้นแยกจากกัน
พารามิเตอร์
ชื่อ | Type | คำอธิบาย |
---|---|---|
table | DataTableSource | ตารางข้อมูลที่จะใช้สำหรับแผนภูมิ |
รีเทิร์น
ColumnChartBuilder
— เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
setDataViewDefinition(dataViewDefinition)
กำหนดมุมมองข้อมูลที่จะใช้กับแผนภูมิ
พารามิเตอร์
ชื่อ | Type | คำอธิบาย |
---|---|---|
dataViewDefinition | DataViewDefinition | ออบเจ็กต์คำจำกัดความมุมมองข้อมูลที่กำหนดข้อมูลพร็อพเพอร์ตี้ที่ควรดึงมาจากแหล่งข้อมูลที่ระบุสำหรับภาพวาดแผนภูมิ |
รีเทิร์น
ColumnChartBuilder
— เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
setDimensions(width, height)
ตั้งค่ามิติข้อมูลสำหรับแผนภูมิ
พารามิเตอร์
ชื่อ | Type | คำอธิบาย |
---|---|---|
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);
พารามิเตอร์
ชื่อ | Type | คำอธิบาย |
---|---|---|
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);
พารามิเตอร์
ชื่อ | Type | คำอธิบาย |
---|---|---|
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();
พารามิเตอร์
ชื่อ | Type | คำอธิบาย |
---|---|---|
option | String | ตัวเลือกในการตั้งค่า |
value | Object | ค่าที่จะตั้งค่า |
รีเทิร์น
ColumnChartBuilder
— เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
setRange(start, end)
ตั้งค่าช่วงสำหรับแผนภูมิ
หากมีจุดข้อมูลที่อยู่นอกช่วง ระบบจะขยายช่วงเพื่อรวมจุดข้อมูลเหล่านั้น
พารามิเตอร์
ชื่อ | Type | คำอธิบาย |
---|---|---|
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')
พารามิเตอร์
ชื่อ | Type | คำอธิบาย |
---|---|---|
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);
พารามิเตอร์
ชื่อ | Type | คำอธิบาย |
---|---|---|
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);
พารามิเตอร์
ชื่อ | Type | คำอธิบาย |
---|---|---|
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')
พารามิเตอร์
ชื่อ | Type | คำอธิบาย |
---|---|---|
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);
พารามิเตอร์
ชื่อ | Type | คำอธิบาย |
---|---|---|
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);
พารามิเตอร์
ชื่อ | Type | คำอธิบาย |
---|---|---|
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')
พารามิเตอร์
ชื่อ | Type | คำอธิบาย |
---|---|---|
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);
พารามิเตอร์
ชื่อ | Type | คำอธิบาย |
---|---|---|
textStyle | TextStyle | รูปแบบข้อความที่จะใช้สำหรับชื่อแกนแนวนอน คุณสร้างออบเจ็กต์ TextStyleBuilder ได้โดยเรียกใช้ Charts.newTextStyle() |
รีเทิร์น
ColumnChartBuilder
— เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
useLogScale()
สร้างแกนช่วงเป็นสเกลลอการิทึม (กำหนดให้ค่าทั้งหมดเป็นค่าบวก) แกนของช่วงคือแกนแนวตั้งสำหรับแผนภูมิแนวตั้ง (เช่น เส้น พื้นที่ หรือคอลัมน์) และแกนแนวนอนสำหรับแผนภูมิแนวนอน (เช่น แท่ง)
รีเทิร์น
ColumnChartBuilder
— เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน