google 图表（chart）

最新推荐文章于 2021-08-18 13:46:04 发布

iteye_5904

最新推荐文章于 2021-08-18 13:46:04 发布

阅读量493

点赞数

文章标签： Google JavaScript XHTML Ajax HTML ViewUI

google 图表1

<!--
  copyright (c) 2009 Google inc.

  You are free to copy and use this sample.
  License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Google Visualization API Sample</title>
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load('visualization', '1', {packages: ['geomap']});

    function drawVisualization() {
      var data = new google.visualization.DataTable();
      data.addRows(7);
      data.addColumn('string', 'Country');
      data.addColumn('number', 'Popularity');
      data.setValue(0, 0, 'Germany');
      data.setValue(0, 1, 200);

      data.setValue(1, 0, 'United States');
      data.setValue(1, 1, 300);

      data.setValue(2, 0, 'Brazil');
      data.setValue(2, 1, 400);

      data.setValue(3, 0, 'Canada');
      data.setValue(3, 1, 500);

      data.setValue(4, 0, 'France');
      data.setValue(4, 1, 600);

      data.setValue(5, 0, 'RU');
      data.setValue(5, 1, 700);

      data.setValue(6, 0, 'China');
      data.setValue(6, 1, 900);
      
      var geomap = new google.visualization.GeoMap(
          document.getElementById('visualization'));
      geomap.draw(data, null);
    }
    

    google.setOnLoadCallback(drawVisualization);
  </script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 800px; height: 400px;"></div>
</body>
</html>

google 图表2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Google Visualization API Sample</title>
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load('visualization', '1', {packages: ['motionchart']});

    function drawVisualization() {
    var data = new google.visualization.DataTable();
      data.addRows(6);
      data.addColumn('string', 'Fruit');
      data.addColumn('date', 'Date');
      data.addColumn('number', 'Sales');
      data.addColumn('number', 'Expenses');
      data.addColumn('string', 'Location');
      data.setValue(0, 0, 'Apples');
      data.setValue(0, 1, new Date (1988,0,1));
      data.setValue(0, 2, 1000);
      data.setValue(0, 3, 300);
      data.setValue(0, 4, 'East');
      data.setValue(1, 0, 'Oranges');
      data.setValue(1, 1, new Date (1988,0,1));
      data.setValue(1, 2, 950);
      data.setValue(1, 3, 200);
      data.setValue(1, 4, 'West');
      data.setValue(2, 0, 'Bananas');
      data.setValue(2, 1, new Date (1988,0,1));
      data.setValue(2, 2, 300);
      data.setValue(2, 3, 250);
      data.setValue(2, 4, 'West');
      data.setValue(3, 0, 'Apples');
      data.setValue(3, 1, new Date(1988,1,1));
      data.setValue(3, 2, 1200);
      data.setValue(3, 3, 400);
      data.setValue(3, 4, "East");
      data.setValue(4, 0, 'Oranges');
      data.setValue(4, 1, new Date(1988,1,1));
      data.setValue(4, 2, 900);
      data.setValue(4, 3, 150);
      data.setValue(4, 4, "West");
      data.setValue(5, 0, 'Bananas');
      data.setValue(5, 1, new Date(1988,1,1));
      data.setValue(5, 2, 788);
      data.setValue(5, 3, 617);
      data.setValue(5, 4, "West");
    
      var motionchart = new google.visualization.MotionChart(
          document.getElementById('visualization'));
      motionchart.draw(data, {'width': 800, 'height': 400});
    }
    

    google.setOnLoadCallback(drawVisualization);
  </script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 800px; height: 400px;">loading...</div>
</body>
</html>

http://code.google.com/apis/ajax/playground/

iteye_5904

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
google 图表（chart）

google 图表1 &lt;!-- copyright (c) 2009 Google inc. You are free to copy and use this sample. License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license--&...
复制链接

扫一扫