การควบคุมและหน้าแดชบอร์ด

ในหน้านี้ คุณจะได้ดูวิธีรวมแผนภูมิหลายรายการลงในหน้าแดชบอร์ด และให้การควบคุมแก่ผู้ใช้เพื่อควบคุมข้อมูลที่แสดง

ภาพรวม

แดชบอร์ดเป็นวิธีง่ายๆ ในการจัดระเบียบและจัดการแผนภูมิหลายรายการที่ใช้ข้อมูลพื้นฐานเดียวกัน การใช้ API ที่อธิบายไว้ในหน้านี้ช่วยให้คุณลดภาระในการเดินสายไฟร่วมกัน รวมทั้งประสานงานกับแผนภูมิทั้งหมดที่เป็นส่วนหนึ่งของหน้าแดชบอร์ดได้

หน้าแดชบอร์ดจะกําหนดโดยใช้ คลาส google.visualization.Dashboard อินสแตนซ์ Dashboard รายการจะได้รับ DataTable ที่มีข้อมูลเพื่อให้เห็นภาพ รวมถึงดูแลภาพวาดและแจกจ่ายข้อมูลไปยังแผนภูมิทั้งหมดที่เป็นส่วนหนึ่งของหน้าแดชบอร์ด

ตัวควบคุมคือวิดเจ็ตอินเทอร์เฟซผู้ใช้ (เช่น เครื่องมือเลือกหมวดหมู่ แถบเลื่อนช่วง การเติมข้อมูลอัตโนมัติ...) ที่คุณโต้ตอบด้วยเพื่อขับเคลื่อนข้อมูลที่จัดการโดยหน้าแดชบอร์ดและแผนภูมิที่เป็นส่วนหนึ่งของอินเทอร์เฟซ

การควบคุมจะกําหนดโดยใช้ชั้นเรียน google.visualization.ControlWrapper คุณสามารถเพิ่มอินสแตนซ์ ControlWrapper รายการในหน้าแดชบอร์ดได้ ซึ่งจะทํางานเหมือนท่อและวาล์วในระบบประปา โดยการรวบรวมข้อมูลของผู้ใช้และใช้ข้อมูลในการตัดสินใจว่าจะให้หน้าแดชบอร์ดแสดงข้อมูลใดสําหรับแผนภูมิที่เป็นส่วนหนึ่งของแผนภูมิ

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

หมายเหตุ: หน้าแดชบอร์ดเป็นแบบอินเทอร์แอกทีฟ ลองดําเนินการควบคุมและดูการเปลี่ยนแปลงแผนภูมิแบบเรียลไทม์

การใช้การควบคุมและหน้าแดชบอร์ด

ต่อไปนี้เป็นขั้นตอนสําคัญสําหรับการสร้างหน้าแดชบอร์ดและการฝังในหน้าแดชบอร์ด คุณจะเห็นข้อมูลโค้ดที่แสดงขั้นตอนทั้งหมดด้านล่าง ตามด้วยข้อมูลโดยละเอียดเกี่ยวกับแต่ละขั้นตอน

  1. สร้างโครงกระดูก HTML สําหรับหน้าแดชบอร์ด หน้าเว็บต้องมีเอลิเมนต์ HTML ได้มากเท่าที่ต้องการระงับสมาชิกทุกคนของหน้าแดชบอร์ด ซึ่งรวมถึงหน้าแดชบอร์ด การควบคุม และแผนภูมิทั้งหมดที่เป็นส่วนหนึ่งของหน้าแดชบอร์ด โดยปกติคุณจะใช้ <div> สําหรับแต่ละรายการ
  2. โหลดคลังของคุณ แดชบอร์ดกําหนดให้ต้องรวมหรือโหลดไลบรารี 2 รายการเท่านั้นในหน้าเว็บ ได้แก่ Google AJAX API และแพ็กเกจ controls การแสดงภาพของ Google
  3. เตรียมข้อมูล คุณต้องเตรียมข้อมูลให้เห็นภาพ ซึ่งหมายความว่าจะระบุข้อมูลด้วยตัวเองในโค้ด หรือค้นหาข้อมูลจากเว็บไซต์ระยะไกล
  4. สร้างอินสแตนซ์แดชบอร์ด สร้างอินสแตนซ์ของหน้าแดชบอร์ดโดยเรียกใช้เครื่องมือสร้างและส่งผ่านการอ้างอิงไปยังองค์ประกอบ <div> ที่จะเก็บเอลิเมนต์นั้น
  5. สร้างอินสแตนซ์แผนภูมิและควบคุมได้มากเท่าที่ต้องการ สร้างอินสแตนซ์ google.visualization.ChartWrapper และ google.visualization.ControlWrapper เพื่ออธิบายแผนภูมิแต่ละรายการและการควบคุมที่หน้าแดชบอร์ดจัดการ
  6. สร้างทรัพยากร Dependency เรียกใช้ bind() ในหน้าแดชบอร์ดและส่งอินสแตนซ์ควบคุมและแผนภูมิเพื่อแจ้งให้หน้าแดชบอร์ดทราบถึงสิ่งที่ต้องจัดการ เมื่อตัวควบคุมและแผนภูมิเชื่อมโยงกันแล้ว หน้าแดชบอร์ดจะอัปเดตแผนภูมิให้ตรงกับข้อจํากัดของการควบคุม
  7. วาดแดชบอร์ด เรียกใช้ draw() บนหน้าแดชบอร์ดและส่งข้อมูลของคุณเพื่อวาดแดชบอร์ดทั้งหน้า
  8. การเปลี่ยนแปลงแบบเป็นโปรแกรมหลังจากวาด หรือหลังจากวาดครั้งแรกแล้ว คุณจะควบคุมตัวควบคุมที่เป็นส่วนหนึ่งของหน้าแดชบอร์ดแบบเป็นโปรแกรมได้ และให้หน้าแดชบอร์ดอัปเดตแผนภูมิตามนั้น

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

<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 รายการกับผู้เข้าร่วมคนอื่นๆ ในหน้าแดชบอร์ด (แผนภูมิหรือการควบคุมอื่นๆ) เพื่อให้ระบบจัดเรียงรายการหลังทั้งหมดเมื่อเหตุการณ์เก่ารวบรวมข้อมูลการโต้ตอบแบบเป็นโปรแกรมหรือผู้ใช้ที่ส่งผลต่อข้อมูลที่จัดการโดยหน้าแดชบอร์ด แสดงผลอินสแตนซ์หน้าแดชบอร์ดของตัวเองเพื่อเชื่อมโยงการเรียก bind() หลายรายการเข้าด้วยกัน

  • controls - อินสแตนซ์เดียวหรืออาร์เรย์ของ google.visualization.ControlWrapper อินสแตนซ์ที่กําหนดตัวควบคุมเพื่อเชื่อมโยง
  • แผนภูมิ - อินสแตนซ์เดียวหรืออาร์เรย์ของ google.visualization.ChartWrapper อินสแตนซ์ที่กําหนดแผนภูมิว่าตัวแปรจะขับเคลื่อนด้วยการควบคุม
draw(dataTable) ไม่มี

วาดแดชบอร์ด

  • dataTable - อย่างใดอย่างหนึ่งต่อไปนี้: ออบเจ็กต์ DataTable, ออบเจ็กต์ DataView, การนําเสนอ JSON ของ DataTable หรืออาร์เรย์หลังไวยากรณ์ของ google.visualization.arrayToDataTable()
getSelection() อาร์เรย์ของออบเจ็กต์

แสดงผลอาร์เรย์ของเอนทิตีภาพที่เลือกของแผนภูมิในหน้าแดชบอร์ด เมธอด getSelection() เมื่อเรียกใช้ในหน้าแดชบอร์ด จะแสดงผลรวมทั้งหมดของการเลือกทั้งหมดในแผนภูมิภายในแผนภูมิ ซึ่งจะช่วยให้คุณใช้การอ้างอิงแบบเดียวได้เมื่อทํางานกับการเลือกแผนภูมิ

หมายเหตุ: คุณยังคงต้องแนบ Listener เหตุการณ์สําหรับเหตุการณ์ที่เลือกกับแต่ละแผนภูมิที่ต้องการฟัง

คําอธิบายแบบขยาย

กิจกรรม

ออบเจ็กต์ของแดชบอร์ดจะแสดงเหตุการณ์ต่อไปนี้ โปรดทราบว่าคุณต้องเรียกใช้ Dashboard.draw() ก่อนที่กิจกรรมใดๆ จะถูกทิ้ง

ชื่อ คำอธิบาย พร็อพเพอร์ตี้
error เริ่มทํางานเมื่อเกิดข้อผิดพลาดขณะพยายามแสดงผลหน้าแดชบอร์ด ตัวควบคุมและแผนภูมิอย่างน้อย 1 รายการซึ่งเป็นส่วนหนึ่งของหน้าแดชบอร์ดอาจแสดงผลไม่สําเร็จ รหัส, ข้อความ
ready

หน้าแดชบอร์ดวาดภาพเสร็จแล้วและพร้อมยอมรับการเปลี่ยนแปลง การควบคุมและแผนภูมิทั้งหมดที่เป็นส่วนหนึ่งของหน้าแดชบอร์ดพร้อมใช้งานแล้วสําหรับการเรียกใช้เมธอดภายนอกและการโต้ตอบของผู้ใช้ หากต้องการเปลี่ยนหน้าแดชบอร์ด (หรือข้อมูลที่แสดง) หลังจากวาดแล้ว คุณควรตั้งค่า Listener สําหรับเหตุการณ์นี้ก่อนที่เรียกใช้เมธอด draw จากนั้นจะใช้การเปลี่ยนแปลงหลังจากที่เหตุการณ์เริ่มทํางานเท่านั้น

เหตุการณ์ ready จะเริ่มทํางานด้วย

  • หลังจากเสร็จสิ้นการรีเฟรชหน้าแดชบอร์ดที่ทริกเกอร์โดยผู้ใช้หรือการโต้ตอบกับโปรแกรม ด้วยการควบคุมแบบใดแบบหนึ่ง
  • หลังจากการเรียกแบบเป็นโปรแกรมไปยังเมธอด draw() ของส่วนใดๆ ของหน้าแดชบอร์ด
ไม่มี

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() ไม่มี

วาดตัวควบคุม โดยทั่วไปหน้าแดชบอร์ดที่มีตัวควบคุมจะทําหน้าที่ควบคุม คุณควรเรียก 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) ประเภทใดก็ได้

แสดงผลค่าตัวเลือกการควบคุมที่ระบุ

  • key - ชื่อของตัวเลือกในการเรียกข้อมูล อาจเป็นชื่อที่เข้าเกณฑ์ เช่น 'vAxis.title'
  • opt_default_value [ไม่บังคับ] - หากไม่ได้ระบุค่าไว้หรือเป็นค่าว่าง ระบบจะแสดงผลค่านี้
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" วิธีแสดงค่าที่เลือก เมื่ออนุญาตให้เลือกได้หลายรายการ โดยค่าที่เป็นไปได้มีดังนี้
  • 'aside': ค่าที่เลือกจะแสดงในบรรทัดข้อความข้างวิดเจ็ตเครื่องมือเลือกค่า
  • 'below': ค่าที่เลือกจะแสดงในบรรทัดข้อความใต้วิดเจ็ต
  • 'belowWrapping': คล้ายกับ below แต่รายการที่ไม่พอดีกับเครื่องมือเลือกจะขึ้นบรรทัดใหม่
  • 'belowStacked': ค่าที่เลือกจะแสดงในคอลัมน์ใต้วิดเจ็ต
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.chartView ให้สอดคล้องกัน

ช่วงขนาด 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 ที่กําหนดให้กับการควบคุมสําหรับการจัดรูปแบบที่กําหนดเอง