ภาพรวม
แดชบอร์ดเป็นวิธีง่ายๆ ในการจัดระเบียบและจัดการแผนภูมิหลายรายการที่ใช้ข้อมูลพื้นฐานเดียวกัน การใช้ API ที่อธิบายไว้ในหน้านี้ช่วยให้คุณลดภาระในการเดินสายไฟร่วมกัน รวมทั้งประสานงานกับแผนภูมิทั้งหมดที่เป็นส่วนหนึ่งของหน้าแดชบอร์ดได้
หน้าแดชบอร์ดจะกําหนดโดยใช้
คลาส google.visualization.Dashboard
อินสแตนซ์ Dashboard
รายการจะได้รับ DataTable
ที่มีข้อมูลเพื่อให้เห็นภาพ รวมถึงดูแลภาพวาดและแจกจ่ายข้อมูลไปยังแผนภูมิทั้งหมดที่เป็นส่วนหนึ่งของหน้าแดชบอร์ด
ตัวควบคุมคือวิดเจ็ตอินเทอร์เฟซผู้ใช้ (เช่น เครื่องมือเลือกหมวดหมู่ แถบเลื่อนช่วง การเติมข้อมูลอัตโนมัติ...) ที่คุณโต้ตอบด้วยเพื่อขับเคลื่อนข้อมูลที่จัดการโดยหน้าแดชบอร์ดและแผนภูมิที่เป็นส่วนหนึ่งของอินเทอร์เฟซ
การควบคุมจะกําหนดโดยใช้ชั้นเรียน google.visualization.ControlWrapper
คุณสามารถเพิ่มอินสแตนซ์ ControlWrapper
รายการในหน้าแดชบอร์ดได้ ซึ่งจะทํางานเหมือนท่อและวาล์วในระบบประปา โดยการรวบรวมข้อมูลของผู้ใช้และใช้ข้อมูลในการตัดสินใจว่าจะให้หน้าแดชบอร์ดแสดงข้อมูลใดสําหรับแผนภูมิที่เป็นส่วนหนึ่งของแผนภูมิ
ดูตัวอย่างต่อไปนี้ซึ่งใช้เครื่องมือเลือกหมวดหมู่และแถบเลื่อนช่วงเพื่อขับเคลื่อนข้อมูลที่แสดงด้วยแผนภูมิวงกลม
หมายเหตุ: หน้าแดชบอร์ดเป็นแบบอินเทอร์แอกทีฟ ลองดําเนินการควบคุมและดูการเปลี่ยนแปลงแผนภูมิแบบเรียลไทม์
การใช้การควบคุมและหน้าแดชบอร์ด
ต่อไปนี้เป็นขั้นตอนสําคัญสําหรับการสร้างหน้าแดชบอร์ดและการฝังในหน้าแดชบอร์ด คุณจะเห็นข้อมูลโค้ดที่แสดงขั้นตอนทั้งหมดด้านล่าง ตามด้วยข้อมูลโดยละเอียดเกี่ยวกับแต่ละขั้นตอน
- สร้างโครงกระดูก HTML สําหรับหน้าแดชบอร์ด หน้าเว็บต้องมีเอลิเมนต์ HTML ได้มากเท่าที่ต้องการระงับสมาชิกทุกคนของหน้าแดชบอร์ด ซึ่งรวมถึงหน้าแดชบอร์ด การควบคุม และแผนภูมิทั้งหมดที่เป็นส่วนหนึ่งของหน้าแดชบอร์ด โดยปกติคุณจะใช้ <div> สําหรับแต่ละรายการ
-
โหลดคลังของคุณ แดชบอร์ดกําหนดให้ต้องรวมหรือโหลดไลบรารี 2 รายการเท่านั้นในหน้าเว็บ ได้แก่ Google AJAX API และแพ็กเกจ
controls
การแสดงภาพของ Google - เตรียมข้อมูล คุณต้องเตรียมข้อมูลให้เห็นภาพ ซึ่งหมายความว่าจะระบุข้อมูลด้วยตัวเองในโค้ด หรือค้นหาข้อมูลจากเว็บไซต์ระยะไกล
- สร้างอินสแตนซ์แดชบอร์ด สร้างอินสแตนซ์ของหน้าแดชบอร์ดโดยเรียกใช้เครื่องมือสร้างและส่งผ่านการอ้างอิงไปยังองค์ประกอบ <div> ที่จะเก็บเอลิเมนต์นั้น
-
สร้างอินสแตนซ์แผนภูมิและควบคุมได้มากเท่าที่ต้องการ
สร้างอินสแตนซ์
google.visualization.ChartWrapper
และgoogle.visualization.ControlWrapper
เพื่ออธิบายแผนภูมิแต่ละรายการและการควบคุมที่หน้าแดชบอร์ดจัดการ -
สร้างทรัพยากร Dependency เรียกใช้
bind()
ในหน้าแดชบอร์ดและส่งอินสแตนซ์ควบคุมและแผนภูมิเพื่อแจ้งให้หน้าแดชบอร์ดทราบถึงสิ่งที่ต้องจัดการ เมื่อตัวควบคุมและแผนภูมิเชื่อมโยงกันแล้ว หน้าแดชบอร์ดจะอัปเดตแผนภูมิให้ตรงกับข้อจํากัดของการควบคุม -
วาดแดชบอร์ด เรียกใช้
draw()
บนหน้าแดชบอร์ดและส่งข้อมูลของคุณเพื่อวาดแดชบอร์ดทั้งหน้า - การเปลี่ยนแปลงแบบเป็นโปรแกรมหลังจากวาด หรือหลังจากวาดครั้งแรกแล้ว คุณจะควบคุมตัวควบคุมที่เป็นส่วนหนึ่งของหน้าแดชบอร์ดแบบเป็นโปรแกรมได้ และให้หน้าแดชบอร์ดอัปเดตแผนภูมิตามนั้น
ต่อไปนี้เป็นตัวอย่างง่ายๆ ของหน้าเว็บที่สร้างหน้าแดชบอร์ดที่เรียบง่าย พร้อมด้วยแถบเลื่อนช่วงที่ทําให้เกิดแผนภูมิวงกลม หน้าแดชบอร์ดที่ได้จะแสดงอยู่ใต้ข้อมูลโค้ด
<html> <head> <!--Load the AJAX API--> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> // Load the Visualization API and the controls package. google.charts.load('current', {'packages':['corechart', 'controls']}); // Set a callback to run when the Google Visualization API is loaded. google.charts.setOnLoadCallback(drawDashboard); // Callback that creates and populates a data table, // instantiates a dashboard, a range slider and a pie chart, // passes in the data and draws it. function drawDashboard() { // Create our data table. var data = google.visualization.arrayToDataTable([ ['Name', 'Donuts eaten'], ['Michael' , 5], ['Elisa', 7], ['Robert', 3], ['John', 2], ['Jessica', 6], ['Aaron', 1], ['Margareth', 8] ]); // Create a dashboard. var dashboard = new google.visualization.Dashboard( document.getElementById('dashboard_div')); // Create a range slider, passing some options var donutRangeSlider = new google.visualization.ControlWrapper({ 'controlType': 'NumberRangeFilter', 'containerId': 'filter_div', 'options': { 'filterColumnLabel': 'Donuts eaten' } }); // Create a pie chart, passing some options var pieChart = new google.visualization.ChartWrapper({ 'chartType': 'PieChart', 'containerId': 'chart_div', 'options': { 'width': 300, 'height': 300, 'pieSliceText': 'value', 'legend': 'right' } }); // Establish dependencies, declaring that 'filter' drives 'pieChart', // so that the pie chart will only display entries that are let through // given the chosen slider range. dashboard.bind(donutRangeSlider, pieChart); // Draw the dashboard. dashboard.draw(data); } </script> </head> <body> <!--Div that will hold the dashboard--> <div id="dashboard_div"> <!--Divs that will hold each control and chart--> <div id="filter_div"></div> <div id="chart_div"></div> </div> </body> </html>
นี่คือหน้าแดชบอร์ดที่โค้ดนี้สร้างขึ้น
1. สร้างโครงกระดูก HTML สําหรับหน้าแดชบอร์ด
หน้าเว็บของคุณต้องมีองค์ประกอบ HTML มาก (โดยปกติคือ <div>) เพื่อระงับทั้งหน้าแดชบอร์ด รวมถึงตัวควบคุมและแผนภูมิทั้งหมดในส่วนนั้น เมื่อสร้างอินสแตนซ์แดชบอร์ด การควบคุม และอินสแตนซ์แผนภูมิ คุณต้องส่งการอ้างอิงไปยังองค์ประกอบดังกล่าว ดังนั้นให้กําหนดรหัสให้กับองค์ประกอบ HTML แต่ละรายการ
<!--Div that will hold the dashboard--> <div id="dashboard_div"> <!--Divs that will hold each control and chart--> <div id="filter_div"></div> <div id="chart_div"></div> </div>
คุณจัดตําแหน่งองค์ประกอบ HTML แต่ละรายการได้ตามต้องการ แต่ต้องดูแดชบอร์ด
2. โหลดไลบรารีของคุณ
แดชบอร์ดกําหนดให้ต้องรวมหรือโหลดไลบรารี 2 รายการเท่านั้นในหน้าเว็บ ได้แก่ Google AJAX API และแพ็กเกจ controls
การแสดงภาพของ Google API (โดยเฉพาะอย่างยิ่ง google.visualization.ChartWrapper
) จะระบุแพ็กเกจอื่นๆ ที่จําเป็นโดยอัตโนมัติ (เช่น gauge
หากคุณใช้แผนภูมิเกจ) และโหลดในทันทีโดยไม่ต้องดําเนินการใดๆ เพิ่มเติม
คุณต้องใช้ google.charts.load()
เพื่อดึงข้อมูลไลบรารีการควบคุม
<!--Load the AJAX API--> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> // Load the Visualization API and the controls package. // Packages for all the other charts you need will be loaded // automatically by the system. google.charts.load('current', {'packages':['corechart', 'controls']}); // Set a callback to run when the Google Visualization API is loaded. google.charts.setOnLoadCallback(drawDashboard); function drawDashboard() { // Everything is loaded. Assemble your dashboard... } </script>
3. เตรียมข้อมูล
เมื่อโหลด Indexing API แล้ว google.charts.setOnLoadCallback()
จะเรียกใช้ฟังก์ชันตัวแฮนเดิลเพื่อให้คุณทราบว่าเมธอดและคลาสตัวช่วยที่จําเป็นทั้งหมดพร้อมให้คุณเริ่มเตรียมข้อมูล
หน้าแดชบอร์ดจะยอมรับข้อมูลในตารางข้อมูลเช่นเดียวกับแผนภูมิ
4. สร้างอินสแตนซ์ของแดชบอร์ด
หลังจากสร้างข้อมูลแล้ว คุณจะจําลองออบเจ็กต์ของแดชบอร์ดได้ เครื่องมือสร้างแดชบอร์ดจะใช้พารามิเตอร์ 1 รายการ ได้แก่ การอ้างอิงองค์ประกอบ DOM ที่จะวาดแดชบอร์ด
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
หน้าแดชบอร์ดจะเปิดขึ้นเป็นคลาส JavaScript หลังจากสร้างอินสแตนซ์หน้าแดชบอร์ดแล้ว คุณอาจทําตามขั้นตอนที่ไม่บังคับได้ 2-3 ขั้นตอน เช่น การเพิ่ม Listener เหตุการณ์ (เช่น เพื่อรับการแจ้งเตือนเมื่อหน้าแดชบอร์ด "พร้อมใช้งาน") หน้าแดชบอร์ดจะจัดการเหตุการณ์ในลักษณะเดียวกับแผนภูมิ ดังนั้นโปรดดูข้อมูลเพิ่มเติมที่การจัดการเหตุการณ์การแสดงภาพหรือการแสดงข้อผิดพลาดอย่างสวยงามในส่วนแผนภูมิ
5. สร้างอินสแตนซ์การควบคุมและแผนภูมิ
กําหนดอินสแตนซ์มากเท่าที่จําเป็นสําหรับแต่ละตัวควบคุมและแผนภูมิที่จะเป็นส่วนหนึ่งของหน้าแดชบอร์ด
ใช้
google.visualization.ChartWrapper
และ
google.visualization.ControlWrapper
เพื่อกําหนดแผนภูมิและการควบคุมตามลําดับ
// Create a range slider, passing some options var donutRangeSlider = new google.visualization.ControlWrapper({ 'controlType': 'NumberRangeFilter', 'containerId': 'filter_div', 'options': { 'filterColumnLabel': 'Donuts eaten' } }); // Create a pie chart, passing some options var pieChart = new google.visualization.ChartWrapper({ 'chartType': 'PieChart', 'containerId': 'chart_div', 'options': { 'width': 300, 'height': 300, 'pieSliceText': 'label' } });
เมื่อสร้างอินสแตนซ์ ChartWrapper
และ ControlWrapper
อย่าระบุพารามิเตอร์ dataTable
หรือ dataSourceUrl
หน้าแดชบอร์ดจะคอยป้อนข้อมูลแต่ละรายการด้วยข้อมูลที่เหมาะสม แต่อย่าลืมระบุพารามิเตอร์ที่จําเป็น: chartType
และ containerId
สําหรับแผนภูมิ controlType
และ containerId
สําหรับการควบคุม
เคล็ดลับบางประการเกี่ยวกับการกําหนดค่าการควบคุมและแผนภูมิ
-
คุณต้องให้สิทธิ์
filterColumnIndex
(หรือfilterColumnLabel
) แก่ตัวควบคุมทั้งหมดเพื่อระบุคอลัมน์ที่google.visualization.DataTable
จะใช้ควบคุม (ในตัวอย่างข้างต้น ตัวควบคุมจะทํางานในคอลัมน์ชื่อ โดนัทกิน) -
ใช้ตัวเลือกการกําหนดค่า
state
ในการควบคุมเพื่อเริ่มต้นใช้งานสถานะที่ชัดแจ้งเมื่อวาดครั้งแรก ตัวอย่างเช่น ใช้การตั้งค่านี้เพื่อแก้ไขตําแหน่งเริ่มต้นของนิ้วโป้งของตัวควบคุมแถบเลื่อนช่วงvar donutRangeSlider = new google.visualization.ControlWrapper({ 'controlType': 'NumberRangeFilter', 'containerId': 'filter_div', 'options': { 'filterColumnLabel': 'Donuts eaten', 'minValue': 1, 'maxValue': 10 }, // Explicitly positions the thumbs at position 3 and 8, // out of the possible range of 1 to 10. 'state': {'lowValue': 3, 'highValue': 8} });
-
แผนภูมิทั้งหมดที่เป็นส่วนหนึ่งของหน้าแดชบอร์ดจะแชร์ตารางข้อมูลเดียวกันกับที่คุณเตรียมไว้ในขั้นตอนเตรียมข้อมูลของคุณ อย่างไรก็ตาม แผนภูมิมักจะต้องจัดเรียงคอลัมน์ใดคอลัมน์หนึ่งเพื่อให้แสดงผลได้อย่างถูกต้อง เช่น แผนภูมิวงกลมต้องมีคอลัมน์สตริงสําหรับป้ายกํากับ ตามด้วยคอลัมน์ตัวเลขสําหรับค่า
ใช้ตัวเลือก
view
ขณะกําหนดค่าอินสแตนซ์ChartWrapper
แต่ละรายการเพื่อประกาศคอลัมน์ที่เกี่ยวข้องกับแผนภูมิ ดังตัวอย่างต่อไปนี้var data = google.visualization.arrayToDataTable([ ['Name', 'Gender', 'Age', 'Donuts eaten'], ['Michael' , 'Male', 12, 5], ['Elisa', 'Female', 20, 7], ['Robert', 'Male', 7, 3], ['John', 'Male', 54, 2], ['Jessica', 'Female', 22, 6], ['Aaron', 'Male', 3, 1], ['Margareth', 'Female', 42, 8] ]); var pieChart = new google.visualization.ChartWrapper({ 'chartType': 'PieChart', 'containerId': 'chart_div', 'options': { 'width': 300, 'height': 300, 'title': 'Donuts eaten per person' }, // The pie chart will use the columns 'Name' and 'Donuts eaten' // out of all the available ones. 'view': {'columns': [0, 3]} }); // The rest of dashboard configuration follows // ...
6. สร้างทรัพยากร Dependency
เมื่อคุณเริ่มต้นทั้งหน้าแดชบอร์ด รวมถึงการควบคุมและแผนภูมิทั้งหมดที่จะมีส่วนร่วมแล้ว ให้ใช้เมธอด bind()
เพื่อแจ้งให้หน้าแดชบอร์ดทราบเกี่ยวกับทรัพยากร Dependency ที่มีอยู่ระหว่างการควบคุมและแผนภูมิ
เมื่อกลุ่มควบคุมและแผนภูมิเชื่อมโยงกันแล้ว หน้าแดชบอร์ดจะอัปเดตแผนภูมิให้ตรงกับข้อจํากัดของการควบคุม ในหน้าแดชบอร์ดตัวอย่างที่คุณกําลังสร้าง แถบเลื่อนช่วงและแผนภูมิวงกลมจะเชื่อมโยงกัน ดังนั้นเมื่อใดก็ตามที่คุณโต้ตอบกับรายการก่อนหน้า แถบเลื่อนรายการหลังจะแสดงเฉพาะข้อมูลที่ตรงกับช่วงที่เลือกเท่านั้น
// 'pieChart' will update whenever you interact with 'donutRangeSlider' // to match the selected range. dashboard.bind(donutRangeSlider, pieChart);
คุณเชื่อมโยงการควบคุมและแผนภูมิในการกําหนดค่าต่างๆ ได้ทั้งแบบ 1 ต่อ 1 หลายต่อหลาย และหลายต่อหลาย เมื่อใดก็ตามที่ตัวควบคุมหลายรายการเชื่อมโยงกับแผนภูมิ หน้าแดชบอร์ดจะอัปเดตแผนภูมิให้ตรงกับข้อจํากัดแบบรวมที่บังคับใช้โดยการควบคุมขอบเขตทั้งหมด ในขณะเดียวกัน การควบคุมก็กระตุ้นให้เกิดแผนภูมิหลายรายการพร้อมกันได้ หากต้องการระบุการเชื่อมโยงหลายรายการพร้อมกัน ให้ส่งอาร์เรย์ในเมธอด bind()
แทนอินสแตนซ์เดี่ยว คุณเชื่อมโยงสาย bind()
หลายสายเข้าด้วยกันได้ด้วย ต่อไปนี้เป็นตัวอย่างบางส่วน
// Many-to-one binding where 'ageSelector' and 'salarySelector' concurrently // participate in selecting which data 'ageVsSalaryScatterPlot' visualizes. dashboard.bind([agePicker, salaryPicker], ageVsSalaryScatterPlot); // One-to-many binding where 'ageSelector' drives two charts. dashboard.bind(agePicker, [ageVsSalaryScatterPlot, ageBarChart]); // bind() chaining where each control drives its own chart. dashboard.bind(agePicker, ageBarChart).bind(salaryRangePicker, salaryPieChart);
สําหรับการใช้งานขั้นสูง คุณยังเชื่อมโยงตัวควบคุมกับตัวควบคุมอื่นๆ เพื่อสร้างเชนทรัพยากร Dependency ได้ด้วย
dashboard.bind(countryPicker, regionPicker).bind(regionPicker, cityPicker);
7. วาดแดชบอร์ด
เรียกเมธอด draw()
บนอินสแตนซ์ของแดชบอร์ดเพื่อแสดงผลทั้งหน้าแดชบอร์ด
เมธอด draw()
ใช้เพียงพารามิเตอร์เดียว ได้แก่ DataTable
(หรือ DataView
) ที่ขับเคลื่อนหน้าแดชบอร์ด
คุณควรเรียกใช้ draw()
ทุกครั้งที่เปลี่ยนองค์ประกอบในหน้าแดชบอร์ด (เช่น เพิ่มตัวควบคุมหรือแผนภูมิใหม่) หรือเปลี่ยน DataTable
โดยรวมที่ขับเคลื่อนหน้าแดชบอร์ดนั้น
อินสแตนซ์แดชบอร์ดจะเริ่มเหตุการณ์ ready
ทุกครั้งที่ draw()
สิ้นสุดการวาดตัวควบคุมและแผนภูมิทั้งหมดซึ่งเป็นส่วนหนึ่งของเหตุการณ์ เหตุการณ์ error
จะเริ่มทํางานหากตัวควบคุมหรือแผนภูมิที่มีการจัดการไม่สามารถวาดได้ ดูข้อมูลเพิ่มเติมเกี่ยวกับการจัดการกิจกรรมได้ที่การจัดการกิจกรรม
หมายเหตุ: คุณควรให้ความสําคัญกับเหตุการณ์ ready
ก่อนที่จะพยายามเปลี่ยนองค์ประกอบของแดชบอร์ดหรือวาดอีกครั้ง
8. การเปลี่ยนแปลงแบบเป็นโปรแกรมหลังจากวาด
เมื่อหน้าแดชบอร์ดเสร็จสมบูรณ์ draw()
แล้ว หน้าแดชบอร์ดจะทํางานและตอบสนองโดยอัตโนมัติเมื่อคุณทํางานใดๆ (เช่น เปลี่ยนช่วงที่เลือกของแถบเลื่อนควบคุมที่เป็นส่วนหนึ่งของหน้าแดชบอร์ด)
หากต้องการเปลี่ยนสถานะหน้าแดชบอร์ดแบบเป็นโปรแกรม ให้ดําเนินการในอินสแตนซ์โดยตรงในอินสแตนซ์ ControlWrapper
และ ChartWrapper
ซึ่งเป็นส่วนหนึ่งของสถานะนี้
กฎทั่วไปคือทําการเปลี่ยนแปลงที่คุณต้องการโดยตรงบนอินสแตนซ์ ControlWrapper
(หรือ ChartWrapper
) โดยตรง เช่น เปลี่ยนตัวเลือกหรือสถานะการควบคุมผ่าน setOption()
และ setState()
ตามลําดับ และเรียกเมธอด draw()
หลังจากนั้น จากนั้นหน้าแดชบอร์ดจะอัปเดตให้ตรงกับการเปลี่ยนแปลงที่ขอ
ตัวอย่างต่อไปนี้แสดงกรณีดังกล่าว
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['corechart', 'controls']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var dashboard = new google.visualization.Dashboard( document.getElementById('programmatic_dashboard_div')); // We omit "var" so that programmaticSlider is visible to changeRange. var programmaticSlider = new google.visualization.ControlWrapper({ 'controlType': 'NumberRangeFilter', 'containerId': 'programmatic_control_div', 'options': { 'filterColumnLabel': 'Donuts eaten', 'ui': {'labelStacking': 'vertical'} } }); var programmaticChart = new google.visualization.ChartWrapper({ 'chartType': 'PieChart', 'containerId': 'programmatic_chart_div', 'options': { 'width': 300, 'height': 300, 'legend': 'none', 'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0}, 'pieSliceText': 'value' } }); var data = google.visualization.arrayToDataTable([ ['Name', 'Donuts eaten'], ['Michael' , 5], ['Elisa', 7], ['Robert', 3], ['John', 2], ['Jessica', 6], ['Aaron', 1], ['Margareth', 8] ]); dashboard.bind(programmaticSlider, programmaticChart); dashboard.draw(data); changeRange = function() { programmaticSlider.setState({'lowValue': 2, 'highValue': 5}); programmaticSlider.draw(); }; changeOptions = function() { programmaticChart.setOption('is3D', true); programmaticChart.draw(); }; } </script> </head> <body> <div id="programmatic_dashboard_div" style="border: 1px solid #ccc"> <table class="columns"> <tr> <td> <div id="programmatic_control_div" style="padding-left: 2em; min-width: 250px"></div> <div> <button style="margin: 1em 1em 1em 2em" onclick="changeRange();"> Select range [2, 5] </button><br /> <button style="margin: 1em 1em 1em 2em" onclick="changeOptions();"> Make the pie chart 3D </button> </div> </td> <td> <div id="programmatic_chart_div"></div> </td> </tr> </table> </div> </body> </html>
เอกสารอ้างอิง API
ส่วนนี้จะแสดงออบเจ็กต์ที่ API การควบคุมและการเปิดเผยเปิดเผย รวมทั้งวิธีการมาตรฐานที่ตัวควบคุมทั้งหมดเปิดเผย
แดชบอร์ด
หมายถึงคอลเล็กชันการควบคุมและแผนภูมิการทํางานร่วมกันที่ใช้ข้อมูลพื้นฐานเดียวกัน
ผู้ผลิต
Dashboard(containerRef)
- คอนเทนเนอร์อ้างอิง
- การอ้างอิงถึงองค์ประกอบคอนเทนเนอร์ที่ถูกต้องในหน้าเว็บที่เก็บเนื้อหาของหน้าแดชบอร์ด
วิธีการ
หน้าแดชบอร์ดแสดงวิธีต่อไปนี้
วิธีการ | ประเภทการแสดงผล | คำอธิบาย |
---|---|---|
bind(controls, charts) |
google.visualization.หน้าแดชบอร์ด |
เชื่อมโยงตัวควบคุมอย่างน้อย 1 รายการกับผู้เข้าร่วมคนอื่นๆ ในหน้าแดชบอร์ด (แผนภูมิหรือการควบคุมอื่นๆ) เพื่อให้ระบบจัดเรียงรายการหลังทั้งหมดเมื่อเหตุการณ์เก่ารวบรวมข้อมูลการโต้ตอบแบบเป็นโปรแกรมหรือผู้ใช้ที่ส่งผลต่อข้อมูลที่จัดการโดยหน้าแดชบอร์ด แสดงผลอินสแตนซ์หน้าแดชบอร์ดของตัวเองเพื่อเชื่อมโยงการเรียก
|
draw(dataTable) |
ไม่มี | วาดแดชบอร์ด
|
getSelection() |
อาร์เรย์ของออบเจ็กต์ |
แสดงผลอาร์เรย์ของเอนทิตีภาพที่เลือกของแผนภูมิในหน้าแดชบอร์ด เมธอด หมายเหตุ: คุณยังคงต้องแนบ Listener เหตุการณ์สําหรับเหตุการณ์ที่เลือกกับแต่ละแผนภูมิที่ต้องการฟัง |
กิจกรรม
ออบเจ็กต์ของแดชบอร์ดจะแสดงเหตุการณ์ต่อไปนี้ โปรดทราบว่าคุณต้องเรียกใช้ Dashboard.draw()
ก่อนที่กิจกรรมใดๆ จะถูกทิ้ง
ชื่อ | คำอธิบาย | พร็อพเพอร์ตี้ |
---|---|---|
error |
เริ่มทํางานเมื่อเกิดข้อผิดพลาดขณะพยายามแสดงผลหน้าแดชบอร์ด ตัวควบคุมและแผนภูมิอย่างน้อย 1 รายการซึ่งเป็นส่วนหนึ่งของหน้าแดชบอร์ดอาจแสดงผลไม่สําเร็จ | รหัส, ข้อความ |
ready |
หน้าแดชบอร์ดวาดภาพเสร็จแล้วและพร้อมยอมรับการเปลี่ยนแปลง การควบคุมและแผนภูมิทั้งหมดที่เป็นส่วนหนึ่งของหน้าแดชบอร์ดพร้อมใช้งานแล้วสําหรับการเรียกใช้เมธอดภายนอกและการโต้ตอบของผู้ใช้ หากต้องการเปลี่ยนหน้าแดชบอร์ด (หรือข้อมูลที่แสดง) หลังจากวาดแล้ว คุณควรตั้งค่า Listener สําหรับเหตุการณ์นี้ก่อนที่เรียกใช้เมธอด เหตุการณ์
|
ไม่มี |
Wrapper ควบคุม
ออบเจ็กต์ ControlWrapper เป็น Wrapper รอบการนําเสนอ JSON ของอินสแตนซ์การควบคุมที่กําหนดค่า ชั้นเรียนจะแสดงวิธีการอํานวยความสะดวกในการกําหนดตัวควบคุมหน้าแดชบอร์ด การวาดภาพ และการเปลี่ยนสถานะแบบเป็นโปรแกรม
ผู้ผลิต
ControlWrapper(opt_spec)
- opt_spec
- [ไม่บังคับ] - ออบเจ็กต์ JSON ที่กําหนดตัวควบคุมหรือเวอร์ชันสตริงที่เรียงลําดับของออบเจ็กต์นั้น พร็อพเพอร์ตี้ที่รองรับของออบเจ็กต์ JSON แสดงอยู่ในตารางต่อไปนี้ หากไม่ได้ระบุไว้ คุณต้องตั้งค่าพร็อพเพอร์ตี้ที่เหมาะสมทั้งหมดโดยใช้เมธอด set... ที่เปิดโดย ControlWrapper
พร็อพเพอร์ตี้ | ประเภท | ต้องใช้ | ค่าเริ่มต้น | คำอธิบาย |
---|---|---|---|---|
ประเภทการควบคุม | สตริง | ต้องใช้ | ไม่มี |
ชื่อคลาสของการควบคุม คุณใช้ชื่อแพ็กเกจของ Google เพื่อยกเว้นชื่อแพ็กเกจของ google.visualization ไม่ได้ เช่น CategoryFilter , NumberRangeFilter
|
รหัสคอนเทนเนอร์ | สตริง | ต้องใช้ | ไม่มี | รหัสขององค์ประกอบ DOM ในหน้าเว็บที่จะโฮสต์การควบคุม |
ตัวเลือก | วัตถุ | ไม่บังคับ | ไม่มี |
ออบเจ็กต์ที่อธิบายตัวเลือกการควบคุม โดยจะใช้สัญพจน์แบบ JavaScript หรือให้แฮนเดิลกับออบเจ็กต์ก็ได้ ตัวอย่าง:
"options": {"filterColumnLabel": "Age",
"minValue": 10, "maxValue": 80}
|
รัฐ | วัตถุ | ไม่บังคับ | ไม่มี |
ออบเจ็กต์ที่อธิบายสถานะของการควบคุม สถานะจะรวบรวมตัวแปรทั้งหมดที่ผู้ใช้ดําเนินการควบคุม เช่น สถานะแถบเลื่อนช่วงซึ่งอธิบายในรูปแบบของตําแหน่งที่แถบเลื่อนต่ําและสูงเลื่อนได้ โดยจะใช้สัญพจน์แบบ JavaScript หรือให้แฮนเดิลกับออบเจ็กต์ก็ได้ตัวอย่าง
"state": {"lowValue": 20, "highValue": 50}
|
วิธีการ
ControlWrapper แสดงวิธีเพิ่มเติมต่อไปนี้
วิธีการ | ประเภทการแสดงผล | คำอธิบาย |
---|---|---|
draw() |
ไม่มี |
วาดตัวควบคุม โดยทั่วไปหน้าแดชบอร์ดที่มีตัวควบคุมจะทําหน้าที่ควบคุม
คุณควรเรียก |
toJSON() |
สตริง | แสดงผลเวอร์ชัน JSON ของการนําเสนอ JSON ของการควบคุม |
clone() |
Wrapper ควบคุม | แสดงผลสําเนาของ Wrapper ของการควบคุม |
getControlType() |
สตริง |
ชื่อคลาสของการควบคุม หากนี่เป็นการควบคุมของ Google ชื่อดังกล่าวจะไม่ตรงตามข้อกําหนดของ google.visualization ตัวอย่างเช่น หากนี่เป็นการควบคุม ControlCategory
|
getControlName() |
สตริง | แสดงชื่อการควบคุมที่กําหนดโดย setControlName() |
getControl() |
ควบคุมการอ้างอิงออบเจ็กต์ |
แสดงผลการอ้างอิงไปยังการควบคุมที่สร้างโดย ControlWrapper นี้ การดําเนินการนี้จะแสดงผลเป็น Null จนกว่าคุณจะเรียกใช้ draw() ในออบเจ็กต์ ControlWrapper (หรือบนแดชบอร์ดที่ถืออยู่) และมีการส่งเหตุการณ์ที่พร้อมใช้งาน ออบเจ็กต์ที่แสดงผลจะแสดงเพียงวิธีเดียวคือ resetControl() ซึ่งจะรีเซ็ตสถานะการควบคุมเป็นวิธีการแรกเริ่ม (เช่น การรีเซ็ตองค์ประกอบแบบฟอร์ม HTML)
|
getContainerId() |
สตริง | รหัสขององค์ประกอบคอนเทนเนอร์ DOM ของการควบคุม |
getOption(key, opt_default_val) |
ประเภทใดก็ได้ | แสดงผลค่าตัวเลือกการควบคุมที่ระบุ
|
getOptions() |
วัตถุ | แสดงผลออบเจ็กต์ตัวเลือกสําหรับการควบคุมนี้ |
getState() |
วัตถุ | แสดงสถานะควบคุม |
setControlType(type) |
ไม่มี |
ตั้งค่าประเภทการควบคุม ส่งผ่านชื่อคลาสของตัวควบคุมเพื่อสร้างอินสแตนซ์ หากเป็นตัวควบคุมของ Google อย่ามีคุณสมบัติที่ควบคุมด้วย google.visualization
เช่น สําหรับแถบเลื่อนช่วงเหนือคอลัมน์ตัวเลข ให้ส่งใน "NumberRangeFilter"
|
setControlName(name) |
ไม่มี | ตั้งชื่อที่กําหนดเองสําหรับการควบคุม ข้อมูลนี้จะไม่ปรากฏในส่วนใดๆ ของการควบคุม แต่มีไว้เพื่อการอ้างอิงของคุณเท่านั้น |
setContainerId(id) |
ไม่มี | กําหนดรหัสขององค์ประกอบ DOM ที่มีสําหรับตัวควบคุม |
setOption(key, value) |
ไม่มี |
กําหนดค่าตัวเลือกการควบคุมค่าเดียว โดยคีย์คือชื่อตัวเลือกและค่าคือค่า หากต้องการยกเลิกการตั้งค่า ให้ส่งค่า Null เป็นค่าว่าง โปรดทราบว่า key อาจเป็นชื่อที่ตรงตามเกณฑ์ เช่น 'vAxis.title'
|
setOptions(options_obj) |
ไม่มี | ตั้งค่าออบเจ็กต์ตัวเลือกที่สมบูรณ์สําหรับการควบคุม |
setState(state_obj) |
ไม่มี | ตั้งค่าสถานะการควบคุม สถานะจะรวบรวมตัวแปรทั้งหมดที่ผู้ใช้ดําเนินการควบคุม เช่น สถานะแถบเลื่อนช่วงซึ่งอธิบายในรูปแบบของตําแหน่งที่แถบเลื่อนต่ําและสูงเลื่อนได้ |
กิจกรรม
ออบเจ็กต์ ControlWrapper ส่งเหตุการณ์ต่อไปนี้ หมายเหตุ: คุณต้องเรียกใช้ ControlWrapper.draw()
(หรือวาดหน้าแดชบอร์ดที่ควบคุมตัวควบคุมได้) ก่อนจึงจะส่งเหตุการณ์ได้
ชื่อ | คำอธิบาย | พร็อพเพอร์ตี้ |
---|---|---|
error |
เริ่มทํางานเมื่อเกิดข้อผิดพลาดเมื่อพยายามแสดงผลตัวควบคุม | รหัส, ข้อความ |
ready |
ตัวควบคุมพร้อมที่จะยอมรับการโต้ตอบของผู้ใช้และการเรียกเมธอดภายนอกแล้ว หากต้องการโต้ตอบกับตัวควบคุมและวิธีเรียกใช้หลังจากวาด คุณควรตั้งค่า Listener สําหรับเหตุการณ์นี้ก่อนที่เรียกใช้เมธอด draw และเรียกใช้หลังจากที่เหตุการณ์เริ่มทํางานเท่านั้น หรืออาจฟังเหตุการณ์ ready ในหน้าแดชบอร์ดที่มีตัวควบคุมและการควบคุมการโทรหลังจากที่เหตุการณ์เริ่มทํางานเท่านั้นก็ได้
|
ไม่มี |
statechange |
เริ่มทํางานเมื่อผู้ใช้โต้ตอบกับการควบคุมและส่งผลต่อสถานะนี้ ตัวอย่างเช่น เหตุการณ์ statechange จะเริ่มทํางานทุกครั้งที่คุณเลื่อนนิ้วโป้งของตัวควบคุมแถบเลื่อนช่วง หากต้องการเรียกสถานะการควบคุมที่อัปเดตแล้วหลังจากเหตุการณ์เริ่มทํางาน ให้เรียกใช้ ControlWrapper.getState()
|
ไม่มี |
Wrapper ของแผนภูมิ
โปรดดูเอกสารเกี่ยวกับ google.visualization.ChartWrapper
ในส่วนอ้างอิง API ของการแสดงภาพ
หมายเหตุต่อไปนี้จะมีผลเมื่อใช้ ChartWrapper
เป็นส่วนหนึ่งของหน้าแดชบอร์ด
-
อย่าตั้งค่าแอตทริบิวต์
dataTable
,query
,dataSourceUrl
และrefreshInterval
อย่างชัดแจ้ง หน้าแดชบอร์ดที่มีแผนภูมิจะจัดการฟีดข้อมูลที่จําเป็น -
ตั้งค่าแอตทริบิวต์
view
เพื่อประกาศว่าคอลัมน์ใดในdataTable
คอลัมน์ทั้งหมดที่ระบุในแดชบอร์ดมีความเกี่ยวข้องกับแผนภูมิดังที่แสดงในสร้างการควบคุมและอินสแตนซ์แผนภูมิ
แกลเลอรีการควบคุม
ตัวกรองเป็นองค์ประกอบกราฟิกที่ผู้ใช้สามารถใช้เพื่อเลือกข้อมูลที่จะแสดงในแผนภูมิแบบอินเทอร์แอกทีฟ ส่วนนี้จะอธิบายตัวกรองแผนภูมิของ Google ได้แก่ CategoryFilter, ChartRangeFilter, DateRangeFilter, NumberRangeFilter และ StringFilter
คุณสามารถใช้รายการใดรายการหนึ่งเป็นพารามิเตอร์สําหรับ ControlWrapper.setControlType()
หมายเหตุ: ในการอธิบายตัวเลือก ระบบจะใช้รูปแบบจุดเพื่ออธิบายแอตทริบิวต์ของออบเจ็กต์ที่ซ้อนกัน เช่น ควรประกาศตัวเลือกชื่อ 'ui.label'
ในออบเจ็กต์ตัวเลือกเป็น var options = {"ui": {"label": "someLabelValue"} };
ตัวกรองหมวดหมู่
เครื่องมือเลือกเพื่อเลือกอย่างน้อย 1 รายการระหว่างชุดของค่าที่กําหนดไว้
รัฐ
ชื่อ | ประเภท | ค่าเริ่มต้น | คำอธิบาย |
---|---|---|---|
ค่าที่เลือก | อาร์เรย์ของออบเจ็กต์หรือประเภทพื้นฐาน | ไม่มี |
ชุดของค่าที่เลือกในปัจจุบัน ค่าที่เลือกต้องเป็นชุดของค่าที่เลือกได้โดยรวมซึ่งกําหนดโดยตัวเลือก values (ไม่สนใจค่าที่ไม่เกี่ยวข้อง) หาก CategoryFilter ไม่อนุญาตแบบหลายตัวเลือก ระบบจะเก็บรักษาเฉพาะค่าแรกของอาร์เรย์
|
ตัวเลือก
ชื่อ | ประเภท | ค่าเริ่มต้น | คำอธิบาย |
---|---|---|---|
ตัวกรองคอลัมน์ | number | ไม่มี |
คอลัมน์ของตารางข้อมูลที่ตัวกรองควรทํางาน ต้องระบุตัวเลือกนี้
หรือ filterColumnLabel หากมีทั้ง 2 ตัวเลือกนี้ ระบบจะให้ความสําคัญเหนือกว่าตัวเลือกนี้
|
ตัวกรองป้ายกํากับคอลัมน์ | สตริง | ไม่มี |
ป้ายกํากับของคอลัมน์ที่ตัวกรองควรทํางาน ต้องระบุตัวเลือกนี้
หรือ filterColumnIndex หากมีทั้ง 2 แบบ filterColumnIndex จะมีความสําคัญเหนือกว่า
|
ค่า | อาร์เรย์ | อัตโนมัติ |
รายการค่าที่มีให้เลือก หากมีการใช้อาร์เรย์ของออบเจ็กต์ ออบเจ็กต์นั้นควรมีการนําเสนอ toString() ที่เหมาะสมสําหรับแสดงต่อผู้ใช้ หากเป็น Null หรือไม่ระบุ ระบบจะคํานวณรายการค่าโดยอัตโนมัติจากค่าในคอลัมน์คอลัมน์ Data ที่ตัวควบคุมนี้จะทํางาน
|
ใช้รูปแบบค่า | บูลีน | เท็จ | เมื่อป้อนข้อมูลในรายการของค่าที่เลือกได้อัตโนมัติจากคอลัมน์ DataTable ตัวกรองนี้จะทํางานอยู่ ไม่ว่าจะใช้ค่าเซลล์จริงหรือค่าที่จัดรูปแบบ |
UI | วัตถุ | null |
ออบเจ็กต์ที่มีสมาชิกเพื่อกําหนดค่าแง่มุมต่างๆ ของ UI ของการควบคุม
หากต้องการระบุพร็อพเพอร์ตี้ของออบเจ็กต์นี้ คุณใช้รูปแบบตัวอักษรของออบเจ็กต์ได้ดังที่แสดงด้านล่างนี้
{label: 'Metric', labelSeparator: ':'} |
UI คําบรรยายวิดีโอ | สตริง | 'เลือกค่า..." | คําบรรยายวิดีโอที่จะแสดงในวิดเจ็ตเครื่องมือเลือกค่าเมื่อไม่ได้เลือกรายการ |
ui.sortValues | บูลีน | จริง | ควรจัดเรียงค่าที่เลือกหรือไม่ |
ui.selectedValuesLayout | สตริง | "aside" | วิธีแสดงค่าที่เลือก เมื่ออนุญาตให้เลือกได้หลายรายการ โดยค่าที่เป็นไปได้มีดังนี้
|
ui.allowNone | บูลีน | จริง |
ผู้ใช้ได้รับอนุญาตให้เลือกค่าใดๆ หรือไม่ หากเป็น false ผู้ใช้ต้องเลือกอย่างน้อย 1 ค่าจากค่าที่มีอยู่ ในระหว่างการเริ่มต้นการควบคุม หากตั้งค่าตัวเลือกเป็น false และไม่ระบุสถานะ selectedValues ระบบจะกําหนดค่าแรกจากค่าที่พร้อมใช้งานโดยอัตโนมัติ
|
UI หลายรายการ | บูลีน | จริง | เลือกค่าหลายค่าได้ไหม โปรดเลือกเพียงค่าเดียว |
ui.allowTyping | บูลีน | จริง | อนุญาตให้ผู้ใช้พิมพ์ในช่องข้อความเพื่อจํากัดรายการตัวเลือกที่เป็นไปได้ (ผ่านการเติมข้อความอัตโนมัติ) ให้แคบลงหรือไม่ |
UI ป้ายกํากับ | สตริง | อัตโนมัติ | ป้ายกํากับที่จะแสดงถัดจากเครื่องมือเลือกหมวดหมู่ หากไม่ได้ระบุ ระบบจะใช้ป้ายกํากับของคอลัมน์ที่ตัวควบคุมดําเนินการ |
ui.labelตัวคั่น | สตริง | ไม่มี | สตริงตัวคั่นที่ต่อท้ายป้ายกํากับ เพื่อแยกป้ายกํากับออกจากเครื่องมือเลือกหมวดหมู่อย่างชัดเจน |
ui.labelStacking | สตริง | "แนวนอน" |
ป้ายกํากับควรแสดงด้านบน (การตั้งแนวตั้ง) หรือด้านข้าง (การซ้อนแนวนอน) ในเครื่องมือเลือกหมวดหมู่ โปรดใช้ 'vertical' หรือ 'horizontal'
|
ui.cssClass | สตริง | "google-visualization-controls-categoryfilter" | คลาส CSS ที่กําหนดให้กับการควบคุมสําหรับการจัดรูปแบบที่กําหนดเอง |
ตัวกรองช่วงแผนภูมิ
แถบเลื่อนที่มี 2 นิ้ววางซ้อนบนแผนภูมิเพื่อเลือกช่วงของค่าจากแกนต่อเนื่องของแผนภูมิ
รัฐ
ชื่อ | ประเภท | ค่าเริ่มต้น | คำอธิบาย |
---|---|---|---|
ช่วงเริ่มต้น | ตัวเลข วันที่ วันที่และเวลา หรือช่วงเวลาของวัน | ค่าเริ่มต้นของช่วง | จุดเริ่มต้นของช่วงที่เลือก รวมทั้งหมด |
ช่วงช่วง | ตัวเลข วันที่ วันที่และเวลา หรือช่วงเวลาของวัน | ค่าช่วงของช่วง | จุดสิ้นสุดของช่วงที่เลือก รวมรวมอยู่ด้วย |
ตัวเลือก
ชื่อ | ประเภท | ค่าเริ่มต้น | คำอธิบาย |
---|---|---|---|
ตัวกรองคอลัมน์ | number | ไม่มี |
ดัชนีของคอลัมน์ในตารางข้อมูลที่ใช้งานตัวกรอง
ต้องระบุตัวเลือกนี้หรือ filterColumnLabel หากมีทั้ง 2 ตัวเลือกนี้ ตัวเลือกนี้จะมีความสําคัญเหนือกว่า
โปรดทราบว่าควรระบุดัชนีของคอลัมน์โดเมนที่รวมอยู่ในแกนอย่างต่อเนื่องของแผนภูมิที่วาดภายในการควบคุมเท่านั้น |
ตัวกรองป้ายกํากับคอลัมน์ | สตริง | ไม่มี |
ป้ายกํากับของคอลัมน์ตารางข้อมูลที่ตัวกรองทํางาน ต้องระบุตัวเลือกนี้
หรือ filterColumnIndex หากมีทั้ง 2 แบบ filterColumnIndex จะมีความสําคัญเหนือกว่า
โปรดทราบว่าควรระบุป้ายกํากับของคอลัมน์โดเมนที่รวมอยู่ในแกนอย่างต่อเนื่องของแผนภูมิที่วาดภายในการควบคุมเท่านั้น |
UI | วัตถุ | null |
ออบเจ็กต์ที่มีสมาชิกเพื่อกําหนดค่าแง่มุมต่างๆ ของ UI ของการควบคุม
หากต้องการระบุพร็อพเพอร์ตี้ของออบเจ็กต์นี้ คุณใช้รูปแบบตัวอักษรของออบเจ็กต์ได้ดังที่แสดงด้านล่างนี้
{chartType: 'ScatterChart', chartOptions: {pointSize: 10}} |
UI ประเภทแผนภูมิ | สตริง | "คอมโบชาร์ต" |
ประเภทของแผนภูมิที่วาดภายในการควบคุม อาจเป็น "AreaChart", "LineChart", "ComboChart" หรือ "ScatterChart" ก็ได้ |
ตัวเลือก UI ของแผนภูมิ | วัตถุ |
{ 'enableInteractivity': false, 'chartArea': {'height': '100%'}, 'legend': {'position': 'none'}, 'hAxis': {'textPosition': 'in'}, 'vAxis': { 'textPosition': 'none', 'gridlines': {'color': 'none'} } } |
ตัวเลือกการกําหนดค่าของแผนภูมิที่วาดภายในการควบคุม
อนุญาตการกําหนดค่าในระดับเดียวกับแผนภูมิในหน้าแดชบอร์ด และเป็นไปตามรูปแบบเดียวกับที่ ChartWrapper.setOptions() ยอมรับ
คุณสามารถระบุตัวเลือกเพิ่มเติมหรือลบล้างตัวเลือกเริ่มต้นได้ (โปรดทราบว่าระบบจะเลือกค่าเริ่มต้นอย่างรอบคอบเพื่อลักษณะการใช้งานที่ดีที่สุด) |
ดู UI ในแผนภูมิ | ออบเจ็กต์หรือสตริง (ออบเจ็กต์แบบเรียงอันดับ) | null |
ข้อกําหนดของข้อมูลพร็อพเพอร์ตี้ที่จะใช้กับตารางข้อมูลที่ใช้ในการวาดแผนภูมิภายในการควบคุม อนุญาตการกําหนดค่าระดับเดียวกับแผนภูมิในหน้าแดชบอร์ด และเป็นไปตามรูปแบบเดียวกับที่ ChartWrapper.setView() ยอมรับ หากไม่ได้ระบุ ระบบจะใช้ตารางข้อมูลในการวาดแผนภูมิ
โปรดทราบว่าแกนแนวนอนของแผนภูมิที่วาดต้องเป็นต่อเนื่อง ดังนั้นโปรดระบุ |
ช่วงขนาด UI | number | ความแตกต่างของค่าข้อมูลที่ตีความเป็น 1 พิกเซล |
ขนาดช่วงที่เลือกได้ขั้นต่ํา (range.end - range.start ) ซึ่งระบุเป็นหน่วยค่าข้อมูล สําหรับแกนตัวเลข ตัวเลข (ไม่ใช่จํานวนเต็ม)
สําหรับแกนวันที่ วันที่และเวลา หรือช่วงเวลาของวัน จะเป็นจํานวนเต็มที่ระบุความแตกต่างในหน่วยมิลลิวินาที
|
ui.snapToData | บูลีน | เท็จ |
หากเป็น "จริง" ระบบจะบีบนิ้วโป้งตามช่วงกับจุดข้อมูลที่ใกล้ที่สุด
ในกรณีนี้ จุดสิ้นสุดของช่วงที่แสดงผลโดย getState() ควรเป็นค่าในตารางข้อมูล
|
กิจกรรม
การเพิ่มเหตุการณ์ ControlWrapper
ชื่อ | คำอธิบาย | พร็อพเพอร์ตี้ |
---|---|---|
statechange |
เช่นเดียวกับที่ระบุสําหรับ ControlWrapper ทุกรายการ จะมีเฉพาะพร็อพเพอร์ตี้บูลีน inProgress เท่านั้นที่ระบุว่าสถานะกําลังเปลี่ยนแปลงอยู่ (หรือลากนิ้วโป้ง)
|
กําลังดําเนินการ |
ตัวกรองช่วงวันที่
แถบเลื่อน 2 ค่าสําหรับเลือกช่วงวันที่
ลองเลื่อนแถบเลื่อนเพื่อเปลี่ยนแถวที่จะแสดงในตารางด้านล่าง
รัฐ
ชื่อ | ประเภท | ค่าเริ่มต้น | คำอธิบาย |
---|---|---|---|
มีคุณค่าต่ํา | number | ไม่มี | ขอบเขตล่างของช่วงที่เลือก |
มีคุณค่าสูง | number | ไม่มี | ขอบเขตที่สูงกว่าของช่วงที่เลือก |
ค่าต่ําสุดอย่างน้อย | บูลีน | ไม่มี |
นิ้วโป้งด้านล่างของแถบเลื่อนล็อกอยู่ที่ช่วงที่ได้รับอนุญาตขั้นต่ําหรือไม่ หากตั้งค่า จะลบล้าง lowValue
|
HighThumbAtMax | บูลีน | ไม่มี |
ภาพขนาดย่อที่สูงขึ้นของแถบเลื่อนล็อกอยู่หรือไม่ หากตั้งค่า จะลบล้าง highValue
|
ตัวเลือก
ชื่อ | ประเภท | ค่าเริ่มต้น | คำอธิบาย |
---|---|---|---|
ตัวกรองคอลัมน์ | number | ไม่มี |
คอลัมน์ของตารางข้อมูลที่ตัวกรองควรทํางาน ต้องระบุตัวเลือกนี้
หรือ filterColumnLabel หากมีทั้ง 2 ตัวเลือกนี้ ระบบจะให้ความสําคัญเหนือกว่าตัวเลือกนี้
ต้องชี้ไปที่คอลัมน์ที่มีประเภท number
|
ตัวกรองป้ายกํากับคอลัมน์ | สตริง | ไม่มี |
ป้ายกํากับของคอลัมน์ที่ตัวกรองควรทํางาน ต้องระบุตัวเลือกนี้
หรือ filterColumnIndex หากมีทั้ง 2 แบบ filterColumnIndex จะมีความสําคัญเหนือกว่า ต้องชี้ไปที่คอลัมน์ที่มีประเภท number
|
ค่าขั้นต่ํา | วันที่ | อัตโนมัติ | ค่าขั้นต่ําที่อนุญาตสําหรับขอบเขตล่างของช่วง หากไม่ระบุ ค่าจะอนุมานจากเนื้อหาของตารางข้อมูลที่จัดการโดยการควบคุม |
ค่าสูงสุด | วันที่ | อัตโนมัติ | ค่าสูงสุดที่อนุญาตสําหรับช่วงที่สูงกว่า หากไม่ระบุ ค่าจะอนุมานจากเนื้อหาของตารางข้อมูลที่จัดการโดยการควบคุม |
UI | วัตถุ | null |
ออบเจ็กต์ที่มีสมาชิกเพื่อกําหนดค่าแง่มุมต่างๆ ของ UI ของการควบคุม
หากต้องการระบุพร็อพเพอร์ตี้ของออบเจ็กต์นี้ คุณใช้รูปแบบตัวอักษรของออบเจ็กต์ได้ดังที่แสดงด้านล่างนี้
{label: 'Age', labelSeparator: ':'} |
UI รูปแบบ | วัตถุ | ไม่มี | วิธีแสดงวันที่เป็นสตริง ยอมรับรูปแบบวันที่ที่ถูกต้อง |
UI สเต็ป | สตริง | วัน | การเปลี่ยนแปลงขั้นต่ําที่สามารถทําได้เมื่อลากนิ้วโป้งแถบเลื่อน: สามารถเป็นเวลาใดก็ได้ในหน่วย "วัน" (ยังไม่รองรับเดือน "เดือน" และ "ปี") |
ui.ticks | number | อัตโนมัติ | จํานวนเห็บ (ตําแหน่งคงที่ในแถบช่วง) ที่นิ้วโป้งของแถบเลื่อนครอบคลุมได้ |
ui.unitIncrement | สตริง | "1" | จํานวนที่จะเพิ่มขึ้นทีละหน่วยของขอบเขตของช่วง การเพิ่มขึ้นของหน่วยเทียบเท่ากับการใช้แป้นลูกศรเพื่อย้ายนิ้วโป้งของแถบเลื่อน |
UI รายการที่บล็อก | number | 10 | จํานวนเงินที่จะเพิ่มขึ้นทีละน้อยของขอบเขตช่วง การเพิ่มขึ้นของบล็อกเทียบเท่ากับการใช้แป้น pgUp และ pgDown เพื่อย้ายนิ้วโป้งของแถบเลื่อน |
ui.showRangeValues | บูลีน | จริง | จะมีป้ายกํากับข้างแถบเลื่อนที่แสดงขอบเขตของช่วงที่เลือกหรือไม่ |
ui.orientation | สตริง | "แนวนอน" | การวางแนวของแถบเลื่อน 'horizontal' หรือ 'vertical' ก็ได้ |
UI ป้ายกํากับ | สตริง | อัตโนมัติ | ป้ายกํากับที่จะแสดงข้างแถบเลื่อน หากไม่ได้ระบุ ระบบจะใช้ป้ายกํากับของคอลัมน์ที่ตัวควบคุมดําเนินการ |
ui.labelตัวคั่น | สตริง | ไม่มี | สตริงตัวคั่นที่ต่อท้ายป้ายกํากับ เพื่อแยกป้ายกํากับออกจากแถบเลื่อนอย่างชัดเจน |
ui.labelStacking | สตริง | "แนวนอน" |
ป้ายกํากับควรแสดงที่ด้านบน (การตั้งแนวตั้ง) หรือแถบเลื่อน (การซ้อนในแนวนอน) โปรดใช้ 'vertical' หรือ 'horizontal'
|
ui.cssClass | สตริง | "google-visualization-controls-rangefilter" | คลาส CSS ที่กําหนดให้กับการควบคุมสําหรับการจัดรูปแบบที่กําหนดเอง |
ตัวกรองช่วง
แถบเลื่อนแบบ 2 ค่าสําหรับเลือกช่วงของค่าตัวเลข
รัฐ
ชื่อ | ประเภท | ค่าเริ่มต้น | คำอธิบาย |
---|---|---|---|
มีคุณค่าต่ํา | number | ไม่มี | ขอบเขตล่างของช่วงที่เลือก |
มีคุณค่าสูง | number | ไม่มี | ขอบเขตที่สูงกว่าของช่วงที่เลือก |
ค่าต่ําสุดอย่างน้อย | บูลีน | ไม่มี |
นิ้วโป้งด้านล่างของแถบเลื่อนล็อกอยู่ที่ช่วงที่ได้รับอนุญาตขั้นต่ําหรือไม่ หากตั้งค่า จะลบล้าง lowValue
|
HighThumbAtMax | บูลีน | ไม่มี |
ภาพขนาดย่อที่สูงขึ้นของแถบเลื่อนล็อกอยู่หรือไม่ หากตั้งค่า จะลบล้าง highValue
|
ตัวเลือก
ชื่อ | ประเภท | ค่าเริ่มต้น | คำอธิบาย |
---|---|---|---|
ตัวกรองคอลัมน์ | number | ไม่มี |
คอลัมน์ของตารางข้อมูลที่ตัวกรองควรทํางาน ต้องระบุตัวเลือกนี้
หรือ filterColumnLabel หากมีทั้ง 2 ตัวเลือกนี้ ระบบจะให้ความสําคัญเหนือกว่าตัวเลือกนี้
ต้องชี้ไปที่คอลัมน์ที่มีประเภท number
|
ตัวกรองป้ายกํากับคอลัมน์ | สตริง | ไม่มี |
ป้ายกํากับของคอลัมน์ที่ตัวกรองควรทํางาน ต้องระบุตัวเลือกนี้
หรือ filterColumnIndex หากมีทั้ง 2 แบบ filterColumnIndex จะมีความสําคัญเหนือกว่า ต้องชี้ไปที่คอลัมน์ที่มีประเภท number
|
ค่าขั้นต่ํา | number | อัตโนมัติ | ค่าขั้นต่ําที่อนุญาตสําหรับขอบเขตล่างของช่วง หากไม่ระบุ ค่าจะอนุมานจากเนื้อหาของตารางข้อมูลที่จัดการโดยการควบคุม |
ค่าสูงสุด | number | อัตโนมัติ | ค่าสูงสุดที่อนุญาตสําหรับช่วงที่สูงกว่า หากไม่ระบุ ค่าจะอนุมานจากเนื้อหาของตารางข้อมูลที่จัดการโดยการควบคุม |
UI | วัตถุ | null |
ออบเจ็กต์ที่มีสมาชิกเพื่อกําหนดค่าแง่มุมต่างๆ ของ UI ของการควบคุม
หากต้องการระบุพร็อพเพอร์ตี้ของออบเจ็กต์นี้ คุณใช้รูปแบบตัวอักษรของออบเจ็กต์ได้ดังที่แสดงด้านล่างนี้
{label: 'Age', labelSeparator: ':'} |
UI รูปแบบ | วัตถุ | ไม่มี | วิธีแสดงตัวเลขเป็นสตริง ยอมรับรูปแบบตัวเลขที่ถูกต้อง |
UI สเต็ป | number | 1 หรือคํานวณจาก ticks หากกําหนด |
การเปลี่ยนแปลงขั้นต่ําที่เป็นไปได้เมื่อลากนิ้วโป้งของแถบเลื่อน |
ui.ticks | number | อัตโนมัติ | จํานวนเห็บ (ตําแหน่งคงที่ในแถบช่วง) ที่นิ้วโป้งของแถบเลื่อนครอบคลุมได้ |
ui.unitIncrement | number | 1 | จํานวนที่จะเพิ่มขึ้นทีละหน่วยของขอบเขตของช่วง การเพิ่มขึ้นของหน่วยเทียบเท่ากับการใช้แป้นลูกศรเพื่อย้ายนิ้วโป้งของแถบเลื่อน |
UI รายการที่บล็อก | number | 10 | จํานวนเงินที่จะเพิ่มขึ้นทีละน้อยของขอบเขตช่วง การเพิ่มขึ้นของบล็อกเทียบเท่ากับการใช้แป้น pgUp และ pgDown เพื่อย้ายนิ้วโป้งของแถบเลื่อน |
ui.showRangeValues | บูลีน | จริง | จะมีป้ายกํากับข้างแถบเลื่อนที่แสดงขอบเขตของช่วงที่เลือกหรือไม่ |
ui.orientation | สตริง | "แนวนอน" | การวางแนวของแถบเลื่อน 'horizontal' หรือ 'vertical' ก็ได้ |
UI ป้ายกํากับ | สตริง | อัตโนมัติ | ป้ายกํากับที่จะแสดงข้างแถบเลื่อน หากไม่ได้ระบุ ระบบจะใช้ป้ายกํากับของคอลัมน์ที่ตัวควบคุมดําเนินการ |
ui.labelตัวคั่น | สตริง | ไม่มี | สตริงตัวคั่นที่ต่อท้ายป้ายกํากับ เพื่อแยกป้ายกํากับออกจากแถบเลื่อนอย่างชัดเจน |
ui.labelStacking | สตริง | "แนวนอน" |
ป้ายกํากับควรแสดงที่ด้านบน (การตั้งแนวตั้ง) หรือแถบเลื่อน (การซ้อนในแนวนอน) โปรดใช้ 'vertical' หรือ 'horizontal'
|
ui.cssClass | สตริง | "google-visualization-controls-rangefilter" | คลาส CSS ที่กําหนดให้กับการควบคุมสําหรับการจัดรูปแบบที่กําหนดเอง |
ตัวกรองสตริง
ช่องป้อนข้อความง่ายๆ ที่ช่วยให้คุณกรองข้อมูลผ่านการจับคู่สตริงได้ การอัปเดตจะอัปเดตเมื่อกดแป้นทุกๆ ปุ่ม: ลองพิมพ์ j
เพื่อจํากัดตารางด้านล่างของวิชัยและจริยา
รัฐ
ชื่อ | ประเภท | ค่าเริ่มต้น | คำอธิบาย |
---|---|---|---|
value | สตริงหรือออบเจ็กต์ | ไม่มี | ข้อความที่ป้อนในช่องป้อนข้อมูลควบคุมในปัจจุบัน |
ตัวเลือก
ชื่อ | ประเภท | ค่าเริ่มต้น | คำอธิบาย |
---|---|---|---|
ตัวกรองคอลัมน์ | number | ไม่มี |
คอลัมน์ของตารางข้อมูลที่ตัวกรองควรทํางาน ต้องระบุตัวเลือกนี้
หรือ filterColumnLabel หากมีทั้ง 2 ตัวเลือกนี้ ระบบจะให้ความสําคัญเหนือกว่าตัวเลือกนี้
|
ตัวกรองป้ายกํากับคอลัมน์ | สตริง | ไม่มี |
ป้ายกํากับของคอลัมน์ที่ตัวกรองควรทํางาน ต้องระบุตัวเลือกนี้
หรือ filterColumnIndex หากมีทั้ง 2 แบบ filterColumnIndex จะมีความสําคัญเหนือกว่า
|
ประเภทการทํางานของคีย์เวิร์ด | สตริง | "คํานําหน้า" |
ตัวควบคุมควรตรงกันทุกประการกับค่าที่ตรงกันเท่านั้น ('exact' ) คํานําหน้าที่ขึ้นต้นด้วยจุดเริ่มต้นของค่า ('prefix' ) หรือสตริงย่อย ('any' )
|
คํานึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ | บูลีน | เท็จ | การจับคู่ควรคํานึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่หรือไม่ |
ใช้รูปแบบค่า | บูลีน | เท็จ | การควบคุมควรตรงกับค่าที่จัดรูปแบบในเซลล์หรือตรงกับค่าจริง |
UI | วัตถุ | null |
ออบเจ็กต์ที่มีสมาชิกเพื่อกําหนดค่าแง่มุมต่างๆ ของ UI ของการควบคุม
หากต้องการระบุพร็อพเพอร์ตี้ของออบเจ็กต์นี้ คุณใช้รูปแบบตัวอักษรของออบเจ็กต์ได้ดังที่แสดงด้านล่างนี้
{label: 'Name', labelSeparator: ':'} |
ui.realtimeTrigger | บูลีน | จริง | การควบคุมควรตรงกันทุกครั้งที่กดแป้นหรือเมื่อช่อง "เปลี่ยนแปลง" (สูญเสียโฟกัสหรือกดแป้น Enter) |
UI ป้ายกํากับ | สตริง | อัตโนมัติ | ป้ายกํากับที่จะแสดงถัดจากช่องป้อนข้อมูล หากไม่ได้ระบุ ระบบจะใช้ป้ายกํากับของคอลัมน์ที่ตัวควบคุมดําเนินการ |
ui.labelตัวคั่น | สตริง | ไม่มี | สตริงตัวคั่นที่ต่อท้ายป้ายกํากับ เพื่อแยกป้ายกํากับออกจากช่องป้อนข้อมูลอย่างชัดเจน |
ui.labelStacking | สตริง | "แนวนอน" |
ป้ายกํากับควรแสดงด้านบน (การตั้งแนวตั้ง) หรือด้านข้าง (การซ้อนแนวนอน) ในช่องป้อนข้อมูล โปรดใช้ 'vertical' หรือ 'horizontal'
|
ui.cssClass | สตริง | "google-visualization-controls-stringfilter" | คลาส CSS ที่กําหนดให้กับการควบคุมสําหรับการจัดรูปแบบที่กําหนดเอง |