Class ScatterChartBuilder

ScatterChartBuilder

เครื่องมือสร้างแผนภูมิกระจาย ดูรายละเอียดเพิ่มเติมได้ที่เอกสารประกอบของ 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สร้างแผนภูมิ
setBackgroundColor(cssValue)ScatterChartBuilderกำหนดสีพื้นหลังให้กับแผนภูมิ
setColors(cssValues)ScatterChartBuilderตั้งค่าสีสำหรับเส้นในแผนภูมิ
setDataSourceUrl(url)ScatterChartBuilderตั้งค่า URL แหล่งข้อมูลที่ใช้ดึงข้อมูลจากแหล่งข้อมูลภายนอก เช่น Google ชีต
setDataTable(tableBuilder)ScatterChartBuilderตั้งค่าตารางข้อมูลที่จะใช้สำหรับแผนภูมิโดยใช้ DataTableBuilder
setDataTable(table)ScatterChartBuilderตั้งค่าตารางข้อมูลที่มีเส้นสำหรับแผนภูมิ รวมถึงป้ายกำกับแกน X
setDataViewDefinition(dataViewDefinition)ScatterChartBuilderกำหนดคำจำกัดความของมุมมองข้อมูลที่จะใช้กับแผนภูมิ
setDimensions(width, height)ScatterChartBuilderกำหนดมิติข้อมูลสำหรับแผนภูมิ
setLegendPosition(position)ScatterChartBuilderกำหนดตำแหน่งของคำอธิบายเทียบกับแผนภูมิ
setLegendTextStyle(textStyle)ScatterChartBuilderตั้งค่ารูปแบบข้อความของคำอธิบายแผนภูมิ
setOption(option, value)ScatterChartBuilderตั้งค่าตัวเลือกขั้นสูงสำหรับแผนภูมินี้
setPointStyle(style)ScatterChartBuilderกำหนดรูปแบบสำหรับจุดในเส้น
setTitle(chartTitle)ScatterChartBuilderตั้งชื่อแผนภูมิ
setTitleTextStyle(textStyle)ScatterChartBuilderตั้งค่ารูปแบบข้อความของชื่อแผนภูมิ
setXAxisLogScale()ScatterChartBuilderเปลี่ยนแกนนอนเป็นสเกลลอการิทึม (ต้องมีค่าทั้งหมดเป็นค่าบวก)
setXAxisRange(start, end)ScatterChartBuilderกำหนดช่วงสำหรับแกนแนวนอนของแผนภูมิ
setXAxisTextStyle(textStyle)ScatterChartBuilderตั้งค่ารูปแบบข้อความแกนแนวนอน
setXAxisTitle(title)ScatterChartBuilderเพิ่มชื่อให้กับแกนแนวนอน
setXAxisTitleTextStyle(textStyle)ScatterChartBuilderตั้งค่ารูปแบบข้อความชื่อแกนแนวนอน
setYAxisLogScale()ScatterChartBuilderเปลี่ยนแกนตั้งเป็นสเกลลอการิทึม (ต้องมีค่าทั้งหมดเป็นค่าบวก)
setYAxisRange(start, end)ScatterChartBuilderกำหนดช่วงสำหรับแกนแนวตั้งของแผนภูมิ
setYAxisTextStyle(textStyle)ScatterChartBuilderตั้งค่ารูปแบบข้อความแกนแนวตั้ง
setYAxisTitle(title)ScatterChartBuilderเพิ่มชื่อให้กับแกนแนวตั้ง
setYAxisTitleTextStyle(textStyle)ScatterChartBuilderตั้งค่ารูปแบบข้อความชื่อแกนแนวตั้ง

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

build()

สร้างแผนภูมิ

รีเทิร์น

Chart — ออบเจ็กต์แผนภูมิ ซึ่งฝังไว้ในเอกสาร องค์ประกอบ UI หรือใช้เป็นรูปภาพแบบคงที่ได้


setBackgroundColor(cssValue)

กำหนดสีพื้นหลังให้กับแผนภูมิ

// Creates a line chart builder and sets the background color to gray
const builder = Charts.newLineChart();
builder.setBackgroundColor('gray');

พารามิเตอร์

ชื่อประเภทคำอธิบาย
cssValueStringค่า 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']);

พารามิเตอร์

ชื่อประเภทคำอธิบาย
cssValuesString[]อาร์เรย์ของค่า CSS สี เช่น ["red", "#acf"] องค์ประกอบที่ n ในอาร์เรย์แสดงสีของเส้นที่ n ในแผนภูมิ

รีเทิร์น

ScatterChartBuilder - เครื่องมือสร้างนี้มีประโยชน์สำหรับการเชื่อมโยง


setDataSourceUrl(url)

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

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

พารามิเตอร์

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

รีเทิร์น

ScatterChartBuilder - เครื่องมือสร้างนี้มีประโยชน์สำหรับการเชื่อมโยง


setDataTable(tableBuilder)

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

พารามิเตอร์

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

รีเทิร์น

ScatterChartBuilder - เครื่องมือสร้างนี้มีประโยชน์สำหรับการเชื่อมโยง


setDataTable(table)

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

พารามิเตอร์

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

รีเทิร์น

ScatterChartBuilder - เครื่องมือสร้างนี้มีประโยชน์สำหรับการเชื่อมโยง


setDataViewDefinition(dataViewDefinition)

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

พารามิเตอร์

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

รีเทิร์น

ScatterChartBuilder - เครื่องมือสร้างนี้มีประโยชน์สำหรับการเชื่อมโยง


setDimensions(width, height)

กำหนดมิติข้อมูลสำหรับแผนภูมิ

พารามิเตอร์

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

รีเทิร์น

ScatterChartBuilder - เครื่องมือสร้างนี้มีประโยชน์สำหรับการเชื่อมโยง


setLegendPosition(position)

กำหนดตำแหน่งของคำอธิบายเทียบกับแผนภูมิ โดยค่าเริ่มต้นจะไม่มีคำอธิบาย

// Creates a line chart builder and sets the legend position to right.
const builder = Charts.newLineChart();
builder.setLegendPosition(Charts.Position.RIGHT);

พารามิเตอร์

ชื่อประเภทคำอธิบาย
positionPositionตำแหน่งของคำอธิบาย

รีเทิร์น

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

พารามิเตอร์

ชื่อประเภทคำอธิบาย
textStyleTextStyleรูปแบบข้อความที่จะใช้สำหรับคำอธิบายแผนภูมิ

รีเทิร์น

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

พารามิเตอร์

ชื่อประเภทคำอธิบาย
optionStringตัวเลือกที่จะตั้งค่า
valueObjectค่าที่จะตั้ง

รีเทิร์น

ScatterChartBuilder - เครื่องมือสร้างนี้มีประโยชน์สำหรับการเชื่อมโยง


setPointStyle(style)

กำหนดรูปแบบสำหรับจุดในเส้น โดยค่าเริ่มต้น จุดจะไม่มีรูปแบบเฉพาะและจะเห็นเฉพาะเส้นเท่านั้น

// Creates a line chart builder and sets large point style.
const builder = Charts.newLineChart();
builder.setPointStyle(Charts.PointStyle.LARGE);

พารามิเตอร์

ชื่อประเภทคำอธิบาย
stylePointStyleรูปแบบที่จะใช้กับจุดในบรรทัด

รีเทิร์น

ScatterChartBuilder - เครื่องมือสร้างนี้มีประโยชน์สำหรับการเชื่อมโยง

ดูเพิ่มเติม


setTitle(chartTitle)

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

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

พารามิเตอร์

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

รีเทิร์น

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

พารามิเตอร์

ชื่อประเภทคำอธิบาย
textStyleTextStyleรูปแบบข้อความที่จะใช้สำหรับชื่อแผนภูมิ คุณสร้างออบเจ็กต์ TextStyleBuilder ได้โดยเรียกใช้ 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);

พารามิเตอร์

ชื่อประเภทคำอธิบาย
startNumberค่าสำหรับเส้นตารางล่างสุดของแกนนอน
endNumberค่าสำหรับเส้นตารางสูงสุดของแกนนอน

รีเทิร์น

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

พารามิเตอร์

ชื่อประเภทคำอธิบาย
textStyleTextStyleรูปแบบข้อความที่จะใช้กับชื่อแกนนอน คุณสร้างออบเจ็กต์ TextStyleBuilder ได้โดยเรียกใช้ 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');

พารามิเตอร์

ชื่อประเภทคำอธิบาย
titleStringชื่อแกน 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);

พารามิเตอร์

ชื่อประเภทคำอธิบาย
textStyleTextStyleรูปแบบข้อความที่จะใช้กับชื่อแกนนอน คุณสร้างออบเจ็กต์ TextStyleBuilder ได้โดยเรียกใช้ 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);

พารามิเตอร์

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

รีเทิร์น

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

พารามิเตอร์

ชื่อประเภทคำอธิบาย
textStyleTextStyleรูปแบบข้อความที่จะใช้กับชื่อแกนนอน คุณสร้างออบเจ็กต์ TextStyleBuilder ได้โดยเรียกใช้ 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');

พารามิเตอร์

ชื่อประเภทคำอธิบาย
titleStringชื่อแกน 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);

พารามิเตอร์

ชื่อประเภทคำอธิบาย
textStyleTextStyleรูปแบบข้อความที่จะใช้กับชื่อแกนนอน คุณสร้างออบเจ็กต์ TextStyleBuilder ได้โดยเรียกใช้ Charts.newTextStyle()

รีเทิร์น

ScatterChartBuilder - เครื่องมือสร้างนี้มีประโยชน์สำหรับการเชื่อมโยง