ภาพรวม
VegaChart เป็นหนึ่งในการแสดงภาพที่เป็นไปได้จํานวนมากซึ่งสร้างได้โดยใช้ VegaVisual Grammar ซึ่งเป็นภาษาสําหรับสร้าง บันทึก และแชร์การออกแบบการแสดงภาพแบบอินเทอร์แอกทีฟ เมื่อใช้ Vega คุณสามารถอธิบายรูปลักษณ์และพฤติกรรมแบบอินเทอร์แอกทีฟของการแสดงภาพในรูปแบบ JSON และสร้างมุมมองบนเว็บโดยใช้ Canvas หรือ SVG ได้
เมื่อวาด VegaChart คุณต้องใส่ข้อกําหนดในการสร้างแผนภูมิในไวยากรณ์การแสดงภาพของ Vega ภายในตัวเลือก โปรดดูตัวอย่างข้อกําหนดเหล่านี้บางส่วนด้านล่างและตัวอย่างเพิ่มเติมได้ในหน้าตัวอย่าง VegaChart
หมายเหตุ: แม้ว่า Google Charts ใน VegaChart จะวาดแผนภูมิ Vega ที่คุณระบุได้ด้วยข้อกําหนด JSON ของ Vega (รวมถึงทุกอย่างในแกลเลอรีตัวอย่าง) แต่ฟีเจอร์เพิ่มเติมที่ต้องมีการเรียกไปยัง Vega API ยังไม่พร้อมใช้งาน
ตัวอย่างง่ายๆ แผนภูมิแท่ง
นี่คือตัวอย่างที่เรียบง่ายของ VegaChart ที่วาดแผนภูมิแท่ง (ดูตัวอย่างต้นฉบับ บทแนะนําโดยละเอียด และแผนภูมิแท่งในเครื่องมือแก้ไขแผนภูมิ Vega)
แม้ว่านี่จะเป็นอีกหนึ่งแนวทางในการสร้างแผนภูมิแท่งใน Google Charts แต่เราวางแผนจะผสานรวมฟีเจอร์ทั้งหมดของแผนภูมิแท่งและคอลัมน์อื่นๆ ไว้ในการติดตั้งใช้งานใหม่โดยอิงตาม VegaChart นี้
ในตัวอย่างนี้ โปรดทราบว่าตัวเลือก "data" จะแทนที่ด้วยค่าต่อไปนี้ ซึ่งใช้ "datatable" ที่การเรียกใช้การเรียกเป็น "source" สําหรับออบเจ็กต์ข้อมูลอื่นที่ชื่อ "table" และใช้ "table" ที่เหลือของข้อกําหนด Vega
'data': [{'name': 'table', 'source': 'datatable'}],
<html> <head> <script src='https://www.gstatic.com/charts/loader.js'></script> <script> google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart); function drawChart() { const dataTable = new google.visualization.DataTable(); dataTable.addColumn({type: 'string', 'id': 'category'}); dataTable.addColumn({type: 'number', 'id': 'amount'}); dataTable.addRows([ ['A', 28], ['B', 55], ['C', 43], ['D', 91], ['E', 81], ['F', 53], ['G', 19], ['H', 87], ]); const options = { "vega": { "$schema": "https://vega.github.io/schema/vega/v4.json", "width": 500, "height": 200, "padding": 5, 'data': [{'name': 'table', 'source': 'datatable'}], "signals": [ { "name": "tooltip", "value": {}, "on": [ {"events": "rect:mouseover", "update": "datum"}, {"events": "rect:mouseout", "update": "{}"} ] } ], "scales": [ { "name": "xscale", "type": "band", "domain": {"data": "table", "field": "category"}, "range": "width", "padding": 0.05, "round": true }, { "name": "yscale", "domain": {"data": "table", "field": "amount"}, "nice": true, "range": "height" } ], "axes": [ { "orient": "bottom", "scale": "xscale" }, { "orient": "left", "scale": "yscale" } ], "marks": [ { "type": "rect", "from": {"data":"table"}, "encode": { "enter": { "x": {"scale": "xscale", "field": "category"}, "width": {"scale": "xscale", "band": 1}, "y": {"scale": "yscale", "field": "amount"}, "y2": {"scale": "yscale", "value": 0} }, "update": { "fill": {"value": "steelblue"} }, "hover": { "fill": {"value": "red"} } } }, { "type": "text", "encode": { "enter": { "align": {"value": "center"}, "baseline": {"value": "bottom"}, "fill": {"value": "#333"} }, "update": { "x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5}, "y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2}, "text": {"signal": "tooltip.amount"}, "fillOpacity": [ {"test": "datum === tooltip", "value": 0}, {"value": 1} ] } } } ] } }; const chart = new google.visualization.VegaChart(document.getElementById('chart-div')); chart.draw(dataTable, options); } </script> </head> <body> <div id="chart-div" style="width: 700px; height: 250px;"></div> </body> </html>
กําลังโหลด
ชื่อแพ็กเกจ google.charts.load
คือ "vegachart"
google.charts.load("current", {packages: ["vegachart"]});
ชื่อคลาสของการแสดงภาพคือ google.visualization.VegaChart
var visualization = new google.visualization.VegaChart(container);
รูปแบบข้อมูล
ระบบอาจส่งข้อมูลไปยัง VegaChart ในลักษณะเดียวกันกับ Google Charts อื่นๆ โดยใช้ DataTable (หรือ DataView) ความแตกต่างหลักๆ ก็คือ แทนที่จะอาศัยลําดับของคอลัมน์เพื่อกําหนดวิธีการใช้คอลัมน์ดังกล่าว VegaChart จะใช้รหัสของแต่ละคอลัมน์เหมือนกับที่คาดไว้สําหรับการแสดงภาพ Vega ที่คุณระบุ
เช่น ระบบจะสร้างตารางต่อไปนี้ด้วยคอลัมน์ที่มีรหัสสําหรับ 'category'
และ 'amount'
และใช้รหัสเดียวกันภายในตัวเลือก "vega" เพื่ออ้างอิงคอลัมน์เหล่านี้
const dataTable = new google.visualization.DataTable(); dataTable.addColumn({type: 'string', 'id': 'category'}); dataTable.addColumn({type: 'number', 'id': 'amount'}); dataTable.addRows([ ['A', 28], ['B', 55], ['C', 43], ]); const options = { 'vega': { ... // Here we create the Vega data object named 'datatable', // which will be passed in via the draw() call with a DataTable. 'data': {'name': 'datatable'}, 'scales': [ { 'name': 'yscale', // Here is an example of how to use the 'amount' field from 'datatable'. 'domain': {'data': 'datatable', 'field': 'amount'}, } ] } }; const chart = new google.visualization.VegaChart( document.getElementById('chart-div')); chart.draw(dataTable, options);
// A DataTable is required, but it may be empty. const dataTable = new google.visualization.DataTable(); const options = { 'vega': { // Here the data is specified inline in the Vega specification. "data": [ { "name": "table", "values": [ {"category": "A", "amount": 28}, {"category": "B", "amount": 55}, {"category": "C", "amount": 43}, ] } ], 'scales': [ { 'name': 'yscale', // Here is how Vega normally uses the 'amount' field from 'table'. "domain": {"data": "table", "field": "category"}, } ] } }; const chart = new google.visualization.VegaChart( document.getElementById('chart-div')); chart.draw(dataTable, options);
อย่างไรก็ตาม ระบบจะส่งตารางข้อมูลเพียงตารางเดียวไปยัง VegaChart ด้วยวิธีนี้ ขณะที่แผนภูมิ Vega บางรายการต้องมีตารางข้อมูลมากกว่า 1 ตาราง เราจะแก้ไขข้อจํากัดนี้ใน Google รุ่นถัดไป
ในระหว่างนี้ คุณสามารถระบุข้อมูลเพิ่มเติมที่ต้องการใช้ในตัวเลือก 'vega'
ของ 'data'
ไม่ว่าจะโดยการระบุหรือโหลดข้อมูลจาก URL
ดูตัวอย่างทั้ง 2 ประเภทได้ที่ด้านล่าง
ตัวเลือกการกําหนดค่า
ชื่อ | |
---|---|
แผนภูมิพื้นที่ |
ออบเจ็กต์ที่มีสมาชิกในการกําหนดค่าตําแหน่งและขนาดของพื้นที่แผนภูมิ (ที่มีการวาดแผนภูมิเอง ยกเว้นแกนและคําอธิบาย) รองรับ 2 รูปแบบ ได้แก่ ตัวเลขหรือตัวเลขตามด้วย % ตัวเลขง่ายๆ คือค่าพิกเซล ตัวเลขตามด้วย % คือเปอร์เซ็นต์ เช่น ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
|
แผนภูมิพื้นที่ด้านล่าง |
วิธีการวาดแผนภูมิจากเส้นขอบด้านล่าง ประเภท: ตัวเลขหรือสตริง
ค่าเริ่มต้น: อัตโนมัติ
|
แผนภูมิพื้นที่ซ้าย |
วิธีการวาดแผนภูมิจากเส้นขอบด้านซ้าย ประเภท: ตัวเลขหรือสตริง
ค่าเริ่มต้น: อัตโนมัติ
|
แผนภูมิพื้นที่ |
วิธีการวาดแผนภูมิจากเส้นขอบด้านขวา ประเภท: ตัวเลขหรือสตริง
ค่าเริ่มต้น: อัตโนมัติ
|
แผนภูมิพื้นที่ |
วิธีการวาดแผนภูมิจากเส้นขอบด้านบน ประเภท: ตัวเลขหรือสตริง
ค่าเริ่มต้น: อัตโนมัติ
|
พื้นที่แผนภูมิ |
ความกว้างของพื้นที่แผนภูมิ ประเภท: ตัวเลขหรือสตริง
ค่าเริ่มต้น: อัตโนมัติ
|
พื้นที่แผนภูมิ |
ความสูงของพื้นที่แผนภูมิ ประเภท: ตัวเลขหรือสตริง
ค่าเริ่มต้น: อัตโนมัติ
|
ความสูง |
ความสูงของแผนภูมิเป็นพิกเซล ประเภท: ตัวเลข
ค่าเริ่มต้น: ความสูงขององค์ประกอบที่มี
|
ความกว้าง |
ความกว้างของแผนภูมิเป็นพิกเซล ประเภท: ตัวเลข
ค่าเริ่มต้น: ความกว้างขององค์ประกอบที่มี
|
เมธอด
วิธีการ | |
---|---|
draw(data, options) |
วาดแผนภูมิ แผนภูมินี้ยอมรับการเรียกใช้เมธอดเพิ่มเติมหลังจากที่เหตุการณ์ ประเภทการคืนสินค้า: ไม่มี
|
getAction(actionID) |
แสดงผลออบเจ็กต์การดําเนินการเคล็ดลับเครื่องมือด้วย ประเภทการแสดงผล: ออบเจ็กต์
|
getBoundingBox(id) |
แสดงผลออบเจ็กต์ที่มีด้านซ้าย ด้านบน ความกว้าง และความสูงขององค์ประกอบแผนภูมิ
ค่าจะสัมพันธ์กับคอนเทนเนอร์ของแผนภูมิ เรียกใช้หลังจากที่มีการวาดแผนภูมิ ประเภทการแสดงผล: ออบเจ็กต์
|
getChartAreaBoundingBox() |
แสดงออบเจ็กต์ที่มีด้านซ้าย ด้านบน ความกว้าง และความสูงของเนื้อหาแผนภูมิ (เช่น ไม่รวมป้ายกํากับและคําอธิบาย)
ค่าจะสัมพันธ์กับคอนเทนเนอร์ของแผนภูมิ เรียกใช้หลังจากที่มีการวาดแผนภูมิ ประเภทการแสดงผล: ออบเจ็กต์
|
getChartLayoutInterface() |
แสดงผลออบเจ็กต์ที่มีข้อมูลเกี่ยวกับตําแหน่งบนหน้าจอของแผนภูมิและองค์ประกอบ สามารถเรียกเมธอดต่อไปนี้ในออบเจ็กต์ที่แสดงผลได้
เรียกใช้หลังจากที่มีการวาดแผนภูมิ ประเภทการแสดงผล: ออบเจ็กต์
|
getHAxisValue(xPosition, optional_axis_index) |
แสดงผลค่าข้อมูลแนวนอนที่ ตัวอย่าง: เรียกใช้หลังจากที่มีการวาดแผนภูมิ ประเภทการแสดงผล: จํานวน
|
getImageURI() |
แสดงผลแผนภูมิที่เรียงลําดับเป็น URI รูปภาพ เรียกใช้หลังจากที่มีการวาดแผนภูมิ ประเภทการแสดงผล: สตริง
|
getSelection() |
แสดงผลอาร์เรย์ของเอนทิตีแผนภูมิที่เลือก
สําหรับแผนภูมินี้ คุณจะเลือกเอนทิตีได้เพียงรายการเดียวในช่วงเวลาที่กําหนด
ประเภทการแสดงผล: อาร์เรย์ขององค์ประกอบการเลือก
|
getVAxisValue(yPosition, optional_axis_index) |
แสดงผลค่าข้อมูลแนวตั้งที่ ตัวอย่าง: เรียกใช้หลังจากที่มีการวาดแผนภูมิ ประเภทการแสดงผล: จํานวน
|
getXLocation(dataValue, optional_axis_index) |
แสดงผลพิกัดพิกเซล x ของ ตัวอย่าง: เรียกใช้หลังจากที่มีการวาดแผนภูมิ ประเภทการแสดงผล: จํานวน
|
getYLocation(dataValue, optional_axis_index) |
แสดงผลพิกัด y ของพิกเซล y ของ ตัวอย่าง: เรียกใช้หลังจากที่มีการวาดแผนภูมิ ประเภทการแสดงผล: จํานวน
|
removeAction(actionID) |
นําการดําเนินการเคล็ดลับเครื่องมือที่มี ประเภทการแสดงผล:
none |
setAction(action) |
ตั้งค่าการทํางานของเคล็ดลับเครื่องมือที่จะเรียกใช้เมื่อผู้ใช้คลิกข้อความการดําเนินการ
เมธอด
ควรตั้งค่าการทํางานของเคล็ดลับเครื่องมือทั้งหมดก่อนเรียกใช้เมธอด ประเภทการแสดงผล:
none |
setSelection() |
เลือกเอนทิตีของแผนภูมิที่ระบุ ยกเลิกรายการที่เลือกก่อนหน้า
สําหรับแผนภูมินี้ คุณจะเลือกเอนทิตีได้ครั้งละ 1 รายการเท่านั้น
ประเภทการคืนสินค้า: ไม่มี
|
clearChart() |
ล้างแผนภูมิและปล่อยทรัพยากรที่จัดสรรไว้ทั้งหมด ประเภทการคืนสินค้า: ไม่มี
|
เหตุการณ์
ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีใช้เหตุการณ์เหล่านี้ได้ที่การโต้ตอบพื้นฐาน การจัดการเหตุการณ์ และเหตุการณ์เริ่มทํางาน
ชื่อ | |
---|---|
animationfinish |
เริ่มทํางานเมื่อภาพเคลื่อนไหวการเปลี่ยนเสร็จสมบูรณ์ พร็อพเพอร์ตี้: ไม่มี
|
click |
เริ่มทํางานเมื่อผู้ใช้คลิกภายในแผนภูมิ ใช้เพื่อระบุได้เมื่อมีการคลิกชื่อ องค์ประกอบข้อมูล รายการคําอธิบาย แกน ตารางกริด หรือป้ายกํากับ พร็อพเพอร์ตี้: targetID
|
error |
เริ่มทํางานเมื่อเกิดข้อผิดพลาดเมื่อพยายามแสดงผลแผนภูมิ พร็อพเพอร์ตี้: รหัส ข้อความ
|
legendpagination |
เริ่มทํางานเมื่อผู้ใช้คลิกลูกศรใส่เลขหน้าคําอธิบาย ส่งคืนดัชนีหน้าเว็บตาม 0 ในตํานานปัจจุบันและจํานวนหน้าทั้งหมด พร็อพเพอร์ตี้: currentPageIndex, totalpages
|
onmouseover |
เริ่มทํางานเมื่อผู้ใช้วางเมาส์เหนือเอนทิตีภาพ ส่งคืนดัชนีแถวและคอลัมน์ขององค์ประกอบตารางข้อมูลที่เกี่ยวข้อง พร็อพเพอร์ตี้: แถว, คอลัมน์
|
onmouseout |
เริ่มทํางานเมื่อผู้ใช้เลื่อนเมาส์ออกจากเอนทิตีภาพ ส่งคืนดัชนีแถวและคอลัมน์ขององค์ประกอบตารางข้อมูลที่เกี่ยวข้อง พร็อพเพอร์ตี้: แถว, คอลัมน์
|
ready |
แผนภูมินี้พร้อมสําหรับการเรียกใช้เมธอดภายนอกแล้ว หากต้องการโต้ตอบกับแผนภูมิและวิธีการโทรหลังจากที่วาดแล้ว คุณควรตั้งค่า Listener สําหรับเหตุการณ์นี้ก่อนที่เรียกใช้เมธอด พร็อพเพอร์ตี้: ไม่มี
|
select |
เริ่มทํางานเมื่อผู้ใช้คลิกเอนทิตีภาพ หากต้องการดูข้อมูลที่ได้รับเลือก โปรดโทรหา พร็อพเพอร์ตี้: ไม่มี
|
นโยบายข้อมูล
โค้ดและข้อมูลทั้งหมดจะได้รับการประมวลผลและแสดงผลในเบราว์เซอร์ ทั้งนี้จะไม่มีการส่งข้อมูลไปยังเซิร์ฟเวอร์ใดๆ