หน้านี้ได้รับการแปลโดย Cloud Translation API

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

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

เนื้อหา

sign.Draw()
Wrapper ของแผนภูมิ
DrawChart()
ข้อมูลเพิ่มเติม

แผนภูมิ.Draw()

นี่เป็นวิธีการพื้นฐานที่ครอบคลุมในตัวอย่างแผนภูมิ Hello ในเอกสารนี้ ขั้นตอนพื้นฐานมีดังนี้

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

ข้อดี

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

ข้อเสีย

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

Wrapper ของแผนภูมิ

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

ข้อดี

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

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

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

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

DrawChar()

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>