เครื่องมือสร้างแผนภูมิเส้น โปรดดูรายละเอียดเพิ่มเติมในเอกสารประกอบของ Google Charts
ต่อไปนี้เป็นตัวอย่างที่แสดงวิธีสร้างแผนภูมิเส้น ข้อมูลจะนำเข้าจากสเปรดชีตของ Google
// Get sample data from a spreadsheet.
var dataSourceUrl = 'https://docs.google.com/spreadsheet/tq?range=A1%3AG5' +
'&key=0Aq4s9w_HxMs7dHpfX05JdmVSb1FpT21sbXd4NVE3UEE&gid=2&headers=-1';
var chartBuilder = Charts.newLineChart()
.setTitle('Yearly Rainfall')
.setXAxisTitle('Month')
.setYAxisTitle('Rainfall (in)')
.setDimensions(600, 500)
.setCurveStyle(Charts.CurveStyle.SMOOTH)
.setPointStyle(Charts.PointStyle.MEDIUM)
.setDataSourceUrl(dataSourceUrl);
var chart = chartBuilder.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();
รีเทิร์น
LineChartBuilder — เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
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") |
รีเทิร์น
LineChartBuilder — เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
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 ในแผนภูมิ |
รีเทิร์น
LineChartBuilder — เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
setCurveStyle(style)
ตั้งค่ารูปแบบที่จะใช้กับเส้นโค้งในแผนภูมิ ดู CurveStyle สำหรับรูปแบบเส้นโค้งที่อนุญาต
// Creates a line chart builder and curves the lines in the chart. var builder = Charts.newLineChart(); builder.setCurveStyle(Charts.CurveStyle.SMOOTH)
พารามิเตอร์
| ชื่อ | Type | คำอธิบาย |
|---|---|---|
style | CurveStyle | รูปแบบของเส้นโค้งในแผนภูมิ |
รีเทิร์น
LineChartBuilder — เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
ดูเพิ่มเติม
setDataSourceUrl(url)
ตั้งค่า URL ของแหล่งข้อมูลที่ใช้เพื่อดึงข้อมูลเข้ามาจากแหล่งที่มาภายนอก เช่น Google ชีต หากมี URL แหล่งข้อมูลและ DataTable ไว้ ระบบจะไม่สนใจ URL ของแหล่งข้อมูล
ดูข้อมูลเพิ่มเติมเกี่ยวกับการค้นหาแหล่งข้อมูลได้ในเอกสารประกอบของ Google Charts
พารามิเตอร์
| ชื่อ | Type | คำอธิบาย |
|---|---|---|
url | String | URL แหล่งข้อมูล รวมถึงพารามิเตอร์การค้นหา |
รีเทิร์น
LineChartBuilder — เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
setDataTable(tableBuilder)
ตั้งค่าตารางข้อมูลที่จะใช้สำหรับแผนภูมิโดยใช้ DataTableBuilder นี่เป็นวิธีที่สะดวกในการตั้งค่าตารางข้อมูลโดยไม่ต้องเรียกใช้ build()
พารามิเตอร์
| ชื่อ | Type | คำอธิบาย |
|---|---|---|
tableBuilder | DataTableBuilder | เครื่องมือสร้างตารางข้อมูล ระบบจะสร้างตารางข้อมูลใหม่ขึ้นทันทีที่เป็นส่วนหนึ่งของการเรียกนี้ ดังนั้นการอัปเดตใดๆ เพิ่มเติมของเครื่องมือสร้างจะไม่แสดงในแผนภูมิ |
รีเทิร์น
LineChartBuilder — เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
setDataTable(table)
ตั้งค่าตารางข้อมูลที่มีเส้นสำหรับแผนภูมิ และป้ายกำกับแกน X คอลัมน์แรกควรเป็นสตริง และมีป้ายกำกับแกนแนวนอน หลังจากนั้นจะมีกี่คอลัมน์ก็ได้ แต่ทั้งหมดต้องเป็นตัวเลข แต่ละคอลัมน์จะแสดงเป็นเส้นแยกจากกัน
พารามิเตอร์
| ชื่อ | Type | คำอธิบาย |
|---|---|---|
table | DataTableSource | ตารางข้อมูลที่จะใช้สำหรับแผนภูมิ |
รีเทิร์น
LineChartBuilder — เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
setDataViewDefinition(dataViewDefinition)
กำหนดมุมมองข้อมูลที่จะใช้กับแผนภูมิ
พารามิเตอร์
| ชื่อ | Type | คำอธิบาย |
|---|---|---|
dataViewDefinition | DataViewDefinition | ออบเจ็กต์คำจำกัดความมุมมองข้อมูลที่กำหนดข้อมูลพร็อพเพอร์ตี้ที่ควรดึงมาจากแหล่งข้อมูลที่ระบุสำหรับภาพวาดแผนภูมิ |
รีเทิร์น
LineChartBuilder — เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
setDimensions(width, height)
ตั้งค่ามิติข้อมูลสำหรับแผนภูมิ
พารามิเตอร์
| ชื่อ | Type | คำอธิบาย |
|---|---|---|
width | Integer | ความกว้างของแผนภูมิเป็นพิกเซล |
height | Integer | ความสูงของแผนภูมิเป็นพิกเซล |
รีเทิร์น
LineChartBuilder — เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
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 | ตำแหน่งของคำอธิบาย |
รีเทิร์น
LineChartBuilder — เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
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 | รูปแบบข้อความที่จะใช้สำหรับคำอธิบายแผนภูมิ |
รีเทิร์น
LineChartBuilder — เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
setOption(option, value)
ตั้งค่าตัวเลือกขั้นสูงสำหรับแผนภูมินี้ ดูตัวเลือกที่ใช้ได้สำหรับแผนภูมินี้ วิธีนี้จะไม่มีผลหากตัวเลือกที่ระบุไม่ถูกต้อง
// Build a line chart with a 1-second animation duration.
var builder = Charts.newLineChart();
builder.setOption('animation.duration', 1000);
var chart = builder.build();
พารามิเตอร์
| ชื่อ | Type | คำอธิบาย |
|---|---|---|
option | String | ตัวเลือกในการตั้งค่า |
value | Object | ค่าที่จะตั้งค่า |
รีเทิร์น
LineChartBuilder — เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
setPointStyle(style)
กำหนดรูปแบบสำหรับจุดในเส้น โดยค่าเริ่มต้น จุดจะไม่มีสไตล์ที่เจาะจงและจะเห็นเฉพาะเส้นเท่านั้น
// Creates a line chart builder and sets large point style. var builder = Charts.newLineChart(); builder.setPointStyle(Charts.PointStyle.LARGE);
พารามิเตอร์
| ชื่อ | Type | คำอธิบาย |
|---|---|---|
style | PointStyle | รูปแบบที่ใช้สำหรับจุดในเส้น |
รีเทิร์น
LineChartBuilder — เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
ดูเพิ่มเติม
setRange(start, end)
ตั้งค่าช่วงสำหรับแผนภูมิ
หากมีจุดข้อมูลที่อยู่นอกช่วง ระบบจะขยายช่วงเพื่อรวมจุดข้อมูลเหล่านั้น
พารามิเตอร์
| ชื่อ | Type | คำอธิบาย |
|---|---|---|
start | Number | ค่าสำหรับเส้นตารางกริดที่ต่ำที่สุดของแกนช่วง |
end | Number | ค่าสำหรับเส้นตารางสูงสุดของแกนช่วง |
รีเทิร์น
LineChartBuilder — เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
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 | ชื่อแผนภูมิ |
รีเทิร์น
LineChartBuilder — เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
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() |
รีเทิร์น
LineChartBuilder — เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
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() |
รีเทิร์น
LineChartBuilder — เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
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 |
รีเทิร์น
LineChartBuilder — เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
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() |
รีเทิร์น
LineChartBuilder — เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
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() |
รีเทิร์น
LineChartBuilder — เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
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 |
รีเทิร์น
LineChartBuilder — เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
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() |
รีเทิร์น
LineChartBuilder — เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน
useLogScale()
สร้างแกนช่วงเป็นสเกลลอการิทึม (กำหนดให้ค่าทั้งหมดเป็นค่าบวก) แกนของช่วงคือแกนแนวตั้งสำหรับแผนภูมิแนวตั้ง (เช่น เส้น พื้นที่ หรือคอลัมน์) และแกนแนวนอนสำหรับแผนภูมิแนวนอน (เช่น แท่ง)
รีเทิร์น
LineChartBuilder — เครื่องมือสร้างนี้มีประโยชน์ต่อการทำเชน