เทคนิคการวาดแผนภูมิ

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

เนื้อหา

  1. chart.draw()
  2. ChartWrapper
  3. DrawChart()
  4. ข้อมูลเพิ่มเติม

chart.draw()

ซึ่งเป็นวิธีการพื้นฐานในตัวอย่าง Hello Chart! ในเอกสารนี้ ขั้นตอนพื้นฐานมีดังนี้

  1. โหลดตัวโหลดไลบรารี gstatic, Google การแสดงข้อมูลผ่านภาพ และไลบรารีแผนภูมิ
  2. เตรียมข้อมูล
  3. เตรียมตัวเลือกแผนภูมิ
  4. ยกตัวอย่างคลาสแผนภูมิผ่านแฮนเดิลไปยังองค์ประกอบคอนเทนเนอร์ของหน้าเว็บ
  5. เลือกลงทะเบียนเพื่อรับเหตุการณ์ในแผนภูมิ หากต้องการใช้เมธอดในแผนภูมิ คุณควรรอเหตุการณ์ "พร้อม"
  6. โทรหา chart.draw() เพื่อส่งข้อมูลและตัวเลือก

ข้อดี

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

ข้อเสีย

  • รายละเอียด
  • คุณต้องโหลดไลบรารีแผนภูมิที่จำเป็นทั้งหมดอย่างชัดแจ้ง
  • หากส่งคำค้นหา คุณต้องใช้สำหรับ Callback ด้วยตนเอง ตรวจสอบความสําเร็จ ดึงข้อมูล DataTable ที่แสดงผล และส่งต่อไปยังแผนภูมิ

ตัวอย่างเช่น

<html>
   <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
     var data;
     var chart;

      // Load the Visualization API and the piechart package.
      google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create our data table.
        data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1],
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);

        // Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300};

        // Instantiate and draw our chart, passing in some options.
        chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        google.visualization.events.addListener(chart, 'select', selectHandler);
        chart.draw(data, options);
      }

      function selectHandler() {
        var selectedItem = chart.getSelection()[0];
        var value = data.getValue(selectedItem.row, 0);
        alert('The user selected ' + value);
      }

    </script>
  </head>
  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div" style="width:400; height:300"></div>
  </body>
</html>

ChartWrapper

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

ข้อดี

  • โค้ดน้อยกว่ามาก
  • โหลดไลบรารีแผนภูมิทั้งหมดที่จําเป็นสำหรับคุณ
  • ทำให้การค้นหาแหล่งข้อมูลง่ายขึ้นมากด้วยการสร้างออบเจ็กต์ Query และจัดการ Callback ให้คุณ
  • ส่งผ่านรหัสองค์ประกอบคอนเทนเนอร์ แล้วระบบจะเรียก getElementByID ให้คุณ
  • คุณส่งข้อมูลได้หลายรูปแบบ ได้แก่ เป็นอาร์เรย์ค่า สตริงลิเทอรัล JSON หรือแฮนเดิล DataTable

ข้อเสีย

  • ปัจจุบัน ChartWrapper เผยแพร่เฉพาะเหตุการณ์ที่เลือก พร้อม และข้อผิดพลาดเท่านั้น หากต้องการรับเหตุการณ์อื่นๆ คุณต้องมีแฮนเดิลของแผนภูมิที่รวมอยู่ และสมัครใช้บริการเหตุการณ์ที่นั่น ดูตัวอย่างในเอกสารประกอบ ChartWrapper

ตัวอย่างเช่น

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

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');   // Don't need to specify chart libraries!
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        var wrapper = new google.visualization.ChartWrapper({
          chartType: 'ColumnChart',
          dataTable: [['', 'Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'],
                      ['', 700, 300, 400, 500, 600, 800]],
          options: {'title': 'Countries'},
          containerId: 'vis_div'
        });
        wrapper.draw();
      }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="vis_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

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

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        var wrapper = new google.visualization.ChartWrapper({
          chartType: 'LineChart',
          dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
          query: 'SELECT A,D WHERE D > 100 ORDER BY D',
          options: {'title': 'Countries'},
          containerId: 'vis_div'
        });
        wrapper.draw()

        // No query callback handler needed!
      }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="vis_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

เมื่อรวมกับการโหลดอัตโนมัติแล้ว โค้ดจะทำให้ได้โค้ดที่กะทัดรัดมาก ดังนี้

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');   // Don't need to specify chart libraries!
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        var wrapper = new google.visualization.ChartWrapper({
          chartType: 'LineChart',
          dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
          query: 'SELECT A,D WHERE D > 100 ORDER BY D',
          options: {'title': 'Countries'},
          containerId: 'vis_div'
        });
        wrapper.draw()
      }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="vis_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

การใช้เครื่องมือแก้ไขแผนภูมิกับ ChartWrapper

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

คุณสามารถฝังเครื่องมือแก้ไขแผนภูมิในหน้าของคุณเองและแสดงวิธีการให้ผู้ใช้เชื่อมต่อกับแหล่งข้อมูลอื่นๆ และแสดงสตริง ChartWrapper ได้ ดูข้อมูลเพิ่มเติมได้ในเอกสารอ้างอิง ChartEditor

 

DrawChart()

DrawChart เป็นเมธอดแบบคงที่สากลที่รวม ChartWrapper

ข้อดี

  • เหมือน ChartWrapper แต่ใช้งานสั้นกว่าเล็กน้อย

ข้อเสีย

  • ไม่แสดงผลแฮนเดิลไปยัง Wrapper คุณจึงจัดการเหตุการณ์ไม่ได้
<DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');   // Don't need to specify chart libraries!
      google.charts.setOnLoadCallback(drawVisualization);
      function drawVisualization() {
        google.visualization.drawChart({
         "containerId": "visualization_div",
         "dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",
         "query":"SELECT A,D WHERE D > 100 ORDER BY D",
         "refreshInterval": 5,
         "chartType": "Table",
         "options": {
            "alternatingRowStyle": true,
            "showRowNumber" : true
         }
       });
      }
    google.charts.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

ข้อมูลเพิ่มเติม