เครื่องมือสร้างแผนภูมิแท่ง โปรดดูรายละเอียดเพิ่มเติมในเอกสารประกอบของ Google Charts
ต่อไปนี้เป็นตัวอย่างที่แสดงวิธีสร้างแผนภูมิแท่ง ข้อมูลจะนำเข้าจาก Google สเปรดชีต
// Get sample data from a spreadsheet. var dataSourceUrl = 'https://docs.google.com/spreadsheet/tq?range=B1%3AC11' + '&key=0Aq4s9w_HxMs7dHpfX05JdmVSb1FpT21sbXd4NVE3UEE&gid=0&headers=-1'; var chartBuilder = Charts.newBarChart() .setTitle('Top Grossing Films in US and Canada') .setXAxisTitle('USD') .setYAxisTitle('Film') .setDimensions(600, 500) .setLegendPosition(Charts.Position.BOTTOM) .setDataSourceUrl(dataSourceUrl); var chart = chartBuilder.build();
วิธีการ
วิธีการ | ประเภทการแสดงผล | รายละเอียดแบบย่อ |
---|---|---|
build() | Chart | สร้างแผนภูมิ |
reverseCategories() | BarChartBuilder | กลับการวาดของอนุกรมในแกนโดเมน |
reverseDirection() | BarChartBuilder | กลับทิศทางที่แท่งกราฟเติบโตตามแกนแนวนอน |
setBackgroundColor(cssValue) | BarChartBuilder | ตั้งค่าสีพื้นหลังของแผนภูมิ |
setColors(cssValues) | BarChartBuilder | ตั้งค่าสีสำหรับเส้นในแผนภูมิ |
setDataSourceUrl(url) | BarChartBuilder | ตั้งค่า URL ของแหล่งข้อมูลที่ใช้เพื่อดึงข้อมูลเข้ามาจากแหล่งที่มาภายนอก เช่น Google ชีต |
setDataTable(tableBuilder) | BarChartBuilder | ตั้งค่าตารางข้อมูลที่จะใช้สำหรับแผนภูมิโดยใช้ DataTableBuilder |
setDataTable(table) | BarChartBuilder | ตั้งค่าตารางข้อมูลที่มีเส้นสำหรับแผนภูมิ และป้ายกำกับแกน X |
setDataViewDefinition(dataViewDefinition) | BarChartBuilder | กำหนดมุมมองข้อมูลที่จะใช้กับแผนภูมิ |
setDimensions(width, height) | BarChartBuilder | ตั้งค่ามิติข้อมูลสำหรับแผนภูมิ |
setLegendPosition(position) | BarChartBuilder | กำหนดตำแหน่งของคำอธิบายตามแผนภูมิ |
setLegendTextStyle(textStyle) | BarChartBuilder | ตั้งค่ารูปแบบข้อความของคำอธิบายแผนภูมิ |
setOption(option, value) | BarChartBuilder | ตั้งค่าตัวเลือกขั้นสูงสำหรับแผนภูมินี้ |
setRange(start, end) | BarChartBuilder | ตั้งค่าช่วงสำหรับแผนภูมิ |
setStacked() | BarChartBuilder | ใช้เส้นที่ซ้อนกันซึ่งหมายความว่าค่าของเส้นและแท่งจะเรียงซ้อนกัน (สะสม) |
setTitle(chartTitle) | BarChartBuilder | ตั้งชื่อของแผนภูมิ |
setTitleTextStyle(textStyle) | BarChartBuilder | ตั้งค่ารูปแบบข้อความของชื่อแผนภูมิ |
setXAxisTextStyle(textStyle) | BarChartBuilder | ตั้งค่ารูปแบบข้อความของแกนแนวนอน |
setXAxisTitle(title) | BarChartBuilder | เพิ่มชื่อให้กับแกนแนวนอน |
setXAxisTitleTextStyle(textStyle) | BarChartBuilder | ตั้งค่ารูปแบบข้อความชื่อของแกนแนวนอน |
setYAxisTextStyle(textStyle) | BarChartBuilder | ตั้งค่ารูปแบบข้อความของแกนแนวตั้ง |
setYAxisTitle(title) | BarChartBuilder | เพิ่มชื่อให้กับแกนแนวตั้ง |
setYAxisTitleTextStyle(textStyle) | BarChartBuilder | ตั้งค่ารูปแบบข้อความชื่อของแกนแนวตั้ง |
useLogScale() | BarChartBuilder | สร้างแกนช่วงเป็นสเกลลอการิทึม (กำหนดให้ค่าทั้งหมดเป็นค่าบวก) |
เอกสารประกอบโดยละเอียด
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();
รีเทิร์น
BarChartBuilder
— เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
reverseDirection()
กลับทิศทางที่แท่งกราฟเติบโตตามแกนแนวนอน โดยค่าเริ่มต้น ค่าจะขยายจากซ้ายไปขวา การเรียกใช้เมธอดนี้ทำให้พวกเขาเติบโตจากขวาไปซ้าย
รีเทิร์น
BarChartBuilder
— เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
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" ) |
รีเทิร์น
BarChartBuilder
— เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
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 ในแผนภูมิ |
รีเทิร์น
BarChartBuilder
— เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
setDataSourceUrl(url)
ตั้งค่า URL ของแหล่งข้อมูลที่ใช้เพื่อดึงข้อมูลเข้ามาจากแหล่งที่มาภายนอก เช่น Google ชีต หากมี URL แหล่งข้อมูลและ DataTable ไว้ ระบบจะไม่สนใจ URL ของแหล่งข้อมูล
ดูข้อมูลเพิ่มเติมเกี่ยวกับการค้นหาแหล่งข้อมูลได้ในเอกสารประกอบของ Google Charts
พารามิเตอร์
ชื่อ | Type | คำอธิบาย |
---|---|---|
url | String | URL แหล่งข้อมูล รวมถึงพารามิเตอร์การค้นหา |
รีเทิร์น
BarChartBuilder
— เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
setDataTable(tableBuilder)
ตั้งค่าตารางข้อมูลที่จะใช้สำหรับแผนภูมิโดยใช้ DataTableBuilder นี่เป็นวิธีที่สะดวกในการตั้งค่าตารางข้อมูลโดยไม่ต้องเรียกใช้ build()
พารามิเตอร์
ชื่อ | Type | คำอธิบาย |
---|---|---|
tableBuilder | DataTableBuilder | เครื่องมือสร้างตารางข้อมูล ระบบจะสร้างตารางข้อมูลใหม่ขึ้นทันทีที่เป็นส่วนหนึ่งของการเรียกนี้ ดังนั้นการอัปเดตใดๆ เพิ่มเติมของเครื่องมือสร้างจะไม่แสดงในแผนภูมิ |
รีเทิร์น
BarChartBuilder
— เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
setDataTable(table)
ตั้งค่าตารางข้อมูลที่มีเส้นสำหรับแผนภูมิ และป้ายกำกับแกน X คอลัมน์แรกควรเป็นสตริง และมีป้ายกำกับแกนแนวนอน หลังจากนั้นจะมีกี่คอลัมน์ก็ได้ แต่ทั้งหมดต้องเป็นตัวเลข แต่ละคอลัมน์จะแสดงเป็นเส้นแยกจากกัน
พารามิเตอร์
ชื่อ | Type | คำอธิบาย |
---|---|---|
table | DataTableSource | ตารางข้อมูลที่จะใช้สำหรับแผนภูมิ |
รีเทิร์น
BarChartBuilder
— เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
setDataViewDefinition(dataViewDefinition)
กำหนดมุมมองข้อมูลที่จะใช้กับแผนภูมิ
พารามิเตอร์
ชื่อ | Type | คำอธิบาย |
---|---|---|
dataViewDefinition | DataViewDefinition | ออบเจ็กต์คำจำกัดความมุมมองข้อมูลที่กำหนดข้อมูลพร็อพเพอร์ตี้ที่ควรดึงมาจากแหล่งข้อมูลที่ระบุสำหรับภาพวาดแผนภูมิ |
รีเทิร์น
BarChartBuilder
— เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
setDimensions(width, height)
ตั้งค่ามิติข้อมูลสำหรับแผนภูมิ
พารามิเตอร์
ชื่อ | Type | คำอธิบาย |
---|---|---|
width | Integer | ความกว้างของแผนภูมิเป็นพิกเซล |
height | Integer | ความสูงของแผนภูมิเป็นพิกเซล |
รีเทิร์น
BarChartBuilder
— เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
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 | ตำแหน่งของคำอธิบาย |
รีเทิร์น
BarChartBuilder
— เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
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 | รูปแบบข้อความที่จะใช้สำหรับคำอธิบายแผนภูมิ |
รีเทิร์น
BarChartBuilder
— เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
setOption(option, value)
ตั้งค่าตัวเลือกขั้นสูงสำหรับแผนภูมินี้ ดูตัวเลือกที่ใช้ได้สำหรับแผนภูมินี้ วิธีนี้จะไม่มีผลหากตัวเลือกที่ระบุไม่ถูกต้อง
// Build a bar chart with a 1-second animation duration. var builder = Charts.newBarChart(); builder.setOption('animation.duration', 1000); var chart = builder.build();
พารามิเตอร์
ชื่อ | Type | คำอธิบาย |
---|---|---|
option | String | ตัวเลือกในการตั้งค่า |
value | Object | ค่าที่จะตั้งค่า |
รีเทิร์น
BarChartBuilder
— เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
setRange(start, end)
ตั้งค่าช่วงสำหรับแผนภูมิ
หากมีจุดข้อมูลที่อยู่นอกช่วง ระบบจะขยายช่วงเพื่อรวมจุดข้อมูลเหล่านั้น
พารามิเตอร์
ชื่อ | Type | คำอธิบาย |
---|---|---|
start | Number | ค่าสำหรับเส้นตารางกริดที่ต่ำที่สุดของแกนช่วง |
end | Number | ค่าสำหรับเส้นตารางสูงสุดของแกนช่วง |
รีเทิร์น
BarChartBuilder
— เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
setStacked()
ใช้เส้นที่ซ้อนกันซึ่งหมายความว่าค่าของเส้นและแท่งจะเรียงซ้อนกัน (สะสม) โดยค่าเริ่มต้น จะไม่มีการซ้อน
รีเทิร์น
BarChartBuilder
— เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
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 | ชื่อแผนภูมิ |
รีเทิร์น
BarChartBuilder
— เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
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() |
รีเทิร์น
BarChartBuilder
— เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
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() |
รีเทิร์น
BarChartBuilder
— เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
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 |
รีเทิร์น
BarChartBuilder
— เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
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() |
รีเทิร์น
BarChartBuilder
— เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
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() |
รีเทิร์น
BarChartBuilder
— เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
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 |
รีเทิร์น
BarChartBuilder
— เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
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() |
รีเทิร์น
BarChartBuilder
— เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
useLogScale()
สร้างแกนช่วงเป็นสเกลลอการิทึม (กำหนดให้ค่าทั้งหมดเป็นค่าบวก) แกนของช่วงคือแกนแนวตั้งสำหรับแผนภูมิแนวตั้ง (เช่น เส้น พื้นที่ หรือคอลัมน์) และแกนแนวนอนสำหรับแผนภูมิแนวนอน (เช่น แท่ง)
รีเทิร์น
BarChartBuilder
— เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน