เครื่องมือสร้างแผนภูมิกระจาย ดูรายละเอียดเพิ่มเติมได้ที่เอกสารประกอบของ Google Charts
ตัวอย่างต่อไปนี้แสดงวิธีสร้างแผนภูมิกระจาย ข้อมูล นำเข้าจากสเปรดชีตใน Google ชีต
// Get sample data from a spreadsheet. const dataSourceUrl = 'https://docs.google.com/spreadsheet/tq?range=C1%3AD' + '&key=0Aq4s9w_HxMs7dHpfX05JdmVSb1FpT21sbXd4NVE3UEE&gid=4&headers=-1'; const chartBuilder = Charts.newScatterChart() .setTitle('Adjusted GDP & U.S. Population') .setXAxisTitle('U.S. Population (millions)') .setYAxisTitle('Adjusted GDP ($ billions)') .setDimensions(600, 500) .setLegendPosition(Charts.Position.NONE) .setDataSourceUrl(dataSourceUrl); const chart = chartBuilder.build();
เมธอด
เอกสารโดยละเอียด
build()
สร้างแผนภูมิ
รีเทิร์น
Chart — ออบเจ็กต์แผนภูมิ ซึ่งฝังไว้ในเอกสาร องค์ประกอบ UI หรือใช้เป็นรูปภาพแบบคงที่ได้
setBackgroundColor(cssValue)
กำหนดสีพื้นหลังให้กับแผนภูมิ
// Creates a line chart builder and sets the background color to gray const builder = Charts.newLineChart(); builder.setBackgroundColor('gray');
พารามิเตอร์
| ชื่อ | ประเภท | คำอธิบาย |
|---|---|---|
css | String | ค่า CSS สำหรับสี (เช่น "blue" หรือ "#00f") |
รีเทิร์น
ScatterChartBuilder - เครื่องมือสร้างนี้มีประโยชน์สำหรับการเชื่อมโยง
setColors(cssValues)
ตั้งค่าสีสำหรับเส้นในแผนภูมิ
// Creates a line chart builder and sets the first two lines to be drawn in // green and red, respectively. const builder = Charts.newLineChart(); builder.setColors(['green', 'red']);
พารามิเตอร์
| ชื่อ | ประเภท | คำอธิบาย |
|---|---|---|
css | String[] | อาร์เรย์ของค่า CSS สี เช่น ["red", "#acf"] องค์ประกอบที่ n
ในอาร์เรย์แสดงสีของเส้นที่ n ในแผนภูมิ |
รีเทิร์น
ScatterChartBuilder - เครื่องมือสร้างนี้มีประโยชน์สำหรับการเชื่อมโยง
setDataSourceUrl(url)
ตั้งค่า URL แหล่งข้อมูลที่ใช้ดึงข้อมูลจากแหล่งข้อมูลภายนอก เช่น Google ชีต หากระบุ URL ของแหล่งข้อมูลและ DataTable ระบบจะไม่สนใจ URL ของแหล่งข้อมูล
ดูข้อมูลเพิ่มเติมเกี่ยวกับการค้นหาแหล่งข้อมูลได้ในเอกสารประกอบของ Google Charts
พารามิเตอร์
| ชื่อ | ประเภท | คำอธิบาย |
|---|---|---|
url | String | URL ของแหล่งข้อมูล รวมถึงพารามิเตอร์การค้นหา |
รีเทิร์น
ScatterChartBuilder - เครื่องมือสร้างนี้มีประโยชน์สำหรับการเชื่อมโยง
setDataTable(tableBuilder)
ตั้งค่าตารางข้อมูลที่จะใช้สำหรับแผนภูมิโดยใช้ DataTableBuilder นี่เป็นวิธีที่สะดวก
ในการตั้งค่าตารางข้อมูลโดยไม่ต้องเรียกใช้ build()
พารามิเตอร์
| ชื่อ | ประเภท | คำอธิบาย |
|---|---|---|
table | Data | เครื่องมือสร้างตารางข้อมูล ระบบจะสร้างตารางข้อมูลใหม่ทันทีซึ่งเป็นส่วนหนึ่งของการเรียกนี้ ดังนั้นการอัปเดตเพิ่มเติมใดๆ ในเครื่องมือสร้างจะไม่แสดงในแผนภูมิ |
รีเทิร์น
ScatterChartBuilder - เครื่องมือสร้างนี้มีประโยชน์สำหรับการเชื่อมโยง
setDataTable(table)
ตั้งค่าตารางข้อมูลที่มีเส้นสำหรับแผนภูมิ รวมถึงป้ายกำกับแกน X คอลัมน์แรกควรเป็นสตริงและมีป้ายกำกับแกนนอน ตามด้วยคอลัมน์จำนวนเท่าใดก็ได้ โดยทั้งหมดต้องเป็นตัวเลข แต่ละคอลัมน์จะแสดงเป็นเส้นที่ต่างกัน
พารามิเตอร์
| ชื่อ | ประเภท | คำอธิบาย |
|---|---|---|
table | Data | ตารางข้อมูลที่จะใช้สำหรับแผนภูมิ |
รีเทิร์น
ScatterChartBuilder - เครื่องมือสร้างนี้มีประโยชน์สำหรับการเชื่อมโยง
setDataViewDefinition(dataViewDefinition)
กำหนดคำจำกัดความของมุมมองข้อมูลที่จะใช้กับแผนภูมิ
พารามิเตอร์
| ชื่อ | ประเภท | คำอธิบาย |
|---|---|---|
data | Data | ออบเจ็กต์คำจำกัดความของมุมมองข้อมูลที่กำหนดมุมมองที่ควร ได้มาจากแหล่งข้อมูลที่ระบุสำหรับการวาดแผนภูมิ |
รีเทิร์น
ScatterChartBuilder - เครื่องมือสร้างนี้มีประโยชน์สำหรับการเชื่อมโยง
setDimensions(width, height)
กำหนดมิติข้อมูลสำหรับแผนภูมิ
พารามิเตอร์
| ชื่อ | ประเภท | คำอธิบาย |
|---|---|---|
width | Integer | ความกว้างของแผนภูมิในหน่วยพิกเซล |
height | Integer | ความสูงของแผนภูมิในหน่วยพิกเซล |
รีเทิร์น
ScatterChartBuilder - เครื่องมือสร้างนี้มีประโยชน์สำหรับการเชื่อมโยง
setLegendPosition(position)
กำหนดตำแหน่งของคำอธิบายเทียบกับแผนภูมิ โดยค่าเริ่มต้นจะไม่มีคำอธิบาย
// Creates a line chart builder and sets the legend position to right. const builder = Charts.newLineChart(); builder.setLegendPosition(Charts.Position.RIGHT);
พารามิเตอร์
| ชื่อ | ประเภท | คำอธิบาย |
|---|---|---|
position | Position | ตำแหน่งของคำอธิบาย |
รีเทิร์น
ScatterChartBuilder - เครื่องมือสร้างนี้มีประโยชน์สำหรับการเชื่อมโยง
setLegendTextStyle(textStyle)
ตั้งค่ารูปแบบข้อความของคำอธิบายแผนภูมิ
// Creates a line chart builder and sets it up for a blue, 26-point legend. const textStyleBuilder = Charts.newTextStyle().setColor('#0000FF').setFontSize(26); const style = textStyleBuilder.build(); const builder = Charts.newLineChart(); builder.setLegendTextStyle(style);
พารามิเตอร์
| ชื่อ | ประเภท | คำอธิบาย |
|---|---|---|
text | Text | รูปแบบข้อความที่จะใช้สำหรับคำอธิบายแผนภูมิ |
รีเทิร์น
ScatterChartBuilder - เครื่องมือสร้างนี้มีประโยชน์สำหรับการเชื่อมโยง
setOption(option, value)
ตั้งค่าตัวเลือกขั้นสูงสำหรับแผนภูมินี้ ดูตัวเลือกที่มีสำหรับ แผนภูมินี้ เมธอดนี้จะไม่มีผลหากตัวเลือกที่ระบุไม่ถูกต้อง
// Build a scatter chart with a 1-second animation duration. const builder = Charts.newScatterChart(); builder.setOption('animation.duration', 1000); const chart = builder.build();
พารามิเตอร์
| ชื่อ | ประเภท | คำอธิบาย |
|---|---|---|
option | String | ตัวเลือกที่จะตั้งค่า |
value | Object | ค่าที่จะตั้ง |
รีเทิร์น
ScatterChartBuilder - เครื่องมือสร้างนี้มีประโยชน์สำหรับการเชื่อมโยง
setPointStyle(style)
กำหนดรูปแบบสำหรับจุดในเส้น โดยค่าเริ่มต้น จุดจะไม่มีรูปแบบเฉพาะและจะเห็นเฉพาะเส้นเท่านั้น
// Creates a line chart builder and sets large point style. const builder = Charts.newLineChart(); builder.setPointStyle(Charts.PointStyle.LARGE);
พารามิเตอร์
| ชื่อ | ประเภท | คำอธิบาย |
|---|---|---|
style | Point | รูปแบบที่จะใช้กับจุดในบรรทัด |
รีเทิร์น
ScatterChartBuilder - เครื่องมือสร้างนี้มีประโยชน์สำหรับการเชื่อมโยง
ดูเพิ่มเติม
setTitle(chartTitle)
ตั้งชื่อแผนภูมิ ชื่อจะแสดงอยู่ตรงกลางเหนือแผนภูมิ
// Creates a line chart builder and title to 'My Line Chart'. const builder = Charts.newLineChart(); builder.setTitle('My Line Chart');
พารามิเตอร์
| ชื่อ | ประเภท | คำอธิบาย |
|---|---|---|
chart | String | ชื่อแผนภูมิ |
รีเทิร์น
ScatterChartBuilder - เครื่องมือสร้างนี้มีประโยชน์สำหรับการเชื่อมโยง
setTitleTextStyle(textStyle)
ตั้งค่ารูปแบบข้อความของชื่อแผนภูมิ
// Creates a line chart builder and sets it up for a blue, 26-point title. const textStyleBuilder = Charts.newTextStyle().setColor('#0000FF').setFontSize(26); const style = textStyleBuilder.build(); const builder = Charts.newLineChart(); builder.setTitleTextStyle(style);
พารามิเตอร์
| ชื่อ | ประเภท | คำอธิบาย |
|---|---|---|
text | Text | รูปแบบข้อความที่จะใช้สำหรับชื่อแผนภูมิ คุณสร้างออบเจ็กต์ Text ได้โดยเรียกใช้ Charts.newTextStyle() |
รีเทิร์น
ScatterChartBuilder - เครื่องมือสร้างนี้มีประโยชน์สำหรับการเชื่อมโยง
setXAxisLogScale()
เปลี่ยนแกนนอนเป็นสเกลลอการิทึม (ต้องมีค่าทั้งหมดเป็นค่าบวก)
รีเทิร์น
ScatterChartBuilder - เครื่องมือสร้างนี้มีประโยชน์สำหรับการเชื่อมโยง
setXAxisRange(start, end)
กำหนดช่วงสำหรับแกนแนวนอนของแผนภูมิ
หากจุดข้อมูลใดอยู่นอกช่วง ระบบจะขยายช่วงให้รวมจุดข้อมูลเหล่านั้น
// Creates a scatter chart builder and sets the X-axis range to be 0 to 100. const builder = Charts.newTableChart(); builder.setXAxisRange(0, 100);
พารามิเตอร์
| ชื่อ | ประเภท | คำอธิบาย |
|---|---|---|
start | Number | ค่าสำหรับเส้นตารางล่างสุดของแกนนอน |
end | Number | ค่าสำหรับเส้นตารางสูงสุดของแกนนอน |
รีเทิร์น
ScatterChartBuilder - เครื่องมือสร้างนี้มีประโยชน์สำหรับการเชื่อมโยง
setXAxisTextStyle(textStyle)
ตั้งค่ารูปแบบข้อความแกนแนวนอน
// Creates a line chart builder and sets the X-axis text style to blue, 18-point // font. const textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build(); const builder = Charts.newLineChart(); builder.setXAxisTextStyle(textStyle);
พารามิเตอร์
| ชื่อ | ประเภท | คำอธิบาย |
|---|---|---|
text | Text | รูปแบบข้อความที่จะใช้กับชื่อแกนนอน คุณสร้างออบเจ็กต์ Text ได้โดยเรียกใช้ Charts.newTextStyle() |
รีเทิร์น
ScatterChartBuilder - เครื่องมือสร้างนี้มีประโยชน์สำหรับการเชื่อมโยง
setXAxisTitle(title)
เพิ่มชื่อให้กับแกนแนวนอน ชื่อจะอยู่ตรงกลางและปรากฏใต้ป้ายกำกับค่าแกน
// Creates a line chart builder and sets the X-axis title. const builder = Charts.newLineChart(); builder.setTitle('X-axis Title');
พารามิเตอร์
| ชื่อ | ประเภท | คำอธิบาย |
|---|---|---|
title | String | ชื่อแกน X |
รีเทิร์น
ScatterChartBuilder - เครื่องมือสร้างนี้มีประโยชน์สำหรับการเชื่อมโยง
setXAxisTitleTextStyle(textStyle)
ตั้งค่ารูปแบบข้อความชื่อแกนแนวนอน
// Creates a line chart builder and sets the X-axis title text style to blue, // 18-point font. const textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build(); const builder = Charts.newLineChart(); builder.setXAxisTitleTextStyle(textStyle);
พารามิเตอร์
| ชื่อ | ประเภท | คำอธิบาย |
|---|---|---|
text | Text | รูปแบบข้อความที่จะใช้กับชื่อแกนนอน คุณสร้างออบเจ็กต์ Text ได้โดยเรียกใช้ Charts.newTextStyle() |
รีเทิร์น
ScatterChartBuilder - เครื่องมือสร้างนี้มีประโยชน์สำหรับการเชื่อมโยง
setYAxisLogScale()
เปลี่ยนแกนตั้งเป็นสเกลลอการิทึม (ต้องมีค่าทั้งหมดเป็นค่าบวก)
รีเทิร์น
ScatterChartBuilder - เครื่องมือสร้างนี้มีประโยชน์สำหรับการเชื่อมโยง
setYAxisRange(start, end)
กำหนดช่วงสำหรับแกนแนวตั้งของแผนภูมิ หากจุดข้อมูลใดอยู่นอกช่วง ระบบจะขยายช่วงให้รวมจุดข้อมูลเหล่านั้น
// Creates a scatter chart builder and sets the Y-axis range to be 0 to 100. const builder = Charts.newTableChart(); builder.setYAxisRange(0, 100);
พารามิเตอร์
| ชื่อ | ประเภท | คำอธิบาย |
|---|---|---|
start | Number | ค่าสำหรับเส้นตารางล่างสุดของแกนแนวตั้ง |
end | Number | ค่าสำหรับเส้นตารางสูงสุดของแกนแนวตั้ง |
รีเทิร์น
ScatterChartBuilder - เครื่องมือสร้างนี้มีประโยชน์สำหรับการเชื่อมโยง
setYAxisTextStyle(textStyle)
ตั้งค่ารูปแบบข้อความแกนแนวตั้ง
// Creates a line chart builder and sets the Y-axis text style to blue, 18-point // font. const textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build(); const builder = Charts.newLineChart(); builder.setYAxisTextStyle(textStyle);
พารามิเตอร์
| ชื่อ | ประเภท | คำอธิบาย |
|---|---|---|
text | Text | รูปแบบข้อความที่จะใช้กับชื่อแกนนอน คุณสร้างออบเจ็กต์ Text ได้โดยเรียกใช้ Charts.newTextStyle() |
รีเทิร์น
ScatterChartBuilder - เครื่องมือสร้างนี้มีประโยชน์สำหรับการเชื่อมโยง
setYAxisTitle(title)
เพิ่มชื่อให้กับแกนแนวตั้ง ชื่อจะอยู่ตรงกลางและปรากฏทางด้านซ้ายของป้ายกำกับค่า
// Creates a line chart builder and sets the Y-axis title. const builder = Charts.newLineChart(); builder.setYAxisTitle('Y-axis Title');
พารามิเตอร์
| ชื่อ | ประเภท | คำอธิบาย |
|---|---|---|
title | String | ชื่อแกน Y |
รีเทิร์น
ScatterChartBuilder - เครื่องมือสร้างนี้มีประโยชน์สำหรับการเชื่อมโยง
setYAxisTitleTextStyle(textStyle)
ตั้งค่ารูปแบบข้อความชื่อแกนแนวตั้ง
// Creates a line chart builder and sets the Y-axis title text style to blue, // 18-point font. const textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build(); const builder = Charts.newLineChart(); builder.setYAxisTitleTextStyle(textStyle);
พารามิเตอร์
| ชื่อ | ประเภท | คำอธิบาย |
|---|---|---|
text | Text | รูปแบบข้อความที่จะใช้กับชื่อแกนนอน คุณสร้างออบเจ็กต์ Text ได้โดยเรียกใช้ Charts.newTextStyle() |
รีเทิร์น
ScatterChartBuilder - เครื่องมือสร้างนี้มีประโยชน์สำหรับการเชื่อมโยง