图表绘制技术

此页面列出了在网页上实例化和绘制图表的不同方法。每种方法都有其优点和缺点,如下所示。

内容

  1. chart.draw()
  2. 图表封装容器
  3. DrawChart() 绘制图表
  4. 更多信息

绘制图表

这是本文档中的 Hello Chart! 示例中介绍的基本方法。以下是基本步骤:

  1. 加载 gstatic 库加载器、Google 可视化库和图表库
  2. 准备数据
  3. 准备任何图表选项
  4. 实例化图表类,并传入页面容器元素的句柄。
  5. (可选)注册以接收任何图表事件。如果您打算在图表上调用方法,则应监听“ready”事件。
  6. 调用 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>

图表封装容器

ChartWrapper 是一个便捷类,可为您处理加载所有相关图表库的操作,还简化了向图表工具数据源发送查询的操作。

优点:

  • 代码更少
  • 为您加载所有必需的图表库
  • 创建 Query 对象并处理回调可让您更轻松地查询数据源
  • 传入容器元素 ID,该 ID 将为您调用 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>

将图表编辑器与 Chart 封装容器搭配使用

您可以使用 Google 电子表格内置的图表编辑器对话框设计图表,然后请求表示图表的序列化 ChartWrapper 字符串。然后,您可以复制并粘贴此字符串,并按上文 ChartWrapper 中的说明使用。

您可以在自己的页面上嵌入图表编辑器,并公开供用户连接到其他数据源并返回 ChartWrapper 字符串的方法。如需了解详情,请参阅 ChartEditor 参考文档

 

DrawChart()

DrawChart 是封装 ChartWrapper 的全局静态方法。

优点:

  • ChartWrapper 相同,但使用时间稍短。

缺点:

  • 不向封装容器返回句柄,因此您无法处理任何事件。
<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>

详细信息