代码改变世界

利用Google Chart制作图表

2011-07-21 08:15  focusdada  阅读(391)  评论(0)    收藏  举报

·         Google Chart 提供了一系列生成图表的在线服务。

Google chart gallery

我们来学习一下官方示例：

Google Column Chart Example

下面是示例的完整源代码：



<html>

  <head>

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>

    <script type="text/javascript">

      google.load("visualization", "1", {packages:["corechart"]});

      google.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = new google.visualization.DataTable();

        data.addColumn('string', 'Year');

        data.addColumn('number', 'Sales');

        data.addColumn('number', 'Expenses');

        data.addRows(4);

        data.setValue(0, 0, '2004');

        data.setValue(0, 1, 1000);

        data.setValue(0, 2, 400);

        data.setValue(1, 0, '2005');

        data.setValue(1, 1, 1170);

        data.setValue(1, 2, 460);

        data.setValue(2, 0, '2006');

        data.setValue(2, 1, 660);

        data.setValue(2, 2, 1120);

        data.setValue(3, 0, '2007');

        data.setValue(3, 1, 1030);

        data.setValue(3, 2, 540);



        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 400, height: 240, title: 'Company Performance',

                          hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}

                         });

      }

    </script>

  </head>



  <body>

    <div id="chart_div"></div>

  </body>

</html>

这个示例按照如下流程进行：

  • 动态加载 Google Chart 必须的类库，并在加载完毕后调用回调函数 drawChart
  • 在 drawChart 函数中，其实在创建一个 DataTable，它拥有 3 个列，分别是年份，销售额和消费支出， 这 3 列的数据类型分别是字符串，数字和数字，然后向其中添加了 4 条数据。
  • 调用 ColumnChart 的构造函数来初始化图表。