google 图表（chart）

天梯梦

浏览: 13731431 次
性别:
来自: 洛杉矶

最近访客更多访客>>

xierui54

简_单

bcrun

hur5457

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Google / Facebook / Pinterest / SNS

Google JavaScript XHTML Ajax HTML

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/

gchartExample001.rar (28 KB)
下载次数: 36

分享到：

10个jQuery动画实例 | 修改php上传限制 (phpmyadmin 限制)

2010-03-29 06:34
浏览 3019
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

google 图表（chart）

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

google 图表（chart）

评论

发表评论

相关推荐

亚马逊Amazon刷单那点事! 刷单工具

[法律授权] 我可以在自己的网站上使用那支影片吗? Youtube、Vimeo、Vine，Instgram

YouTube怎么判断影片内含侵权内容？ 解析Content ID内容识别系统的原理及功能

Chrome 开发工具 (Chrome Developer Tools)：Network Panel说明

Google 搜索技巧

谷歌网站翻译插件 Website Translator

减少HTTP请求之合并图片详解（大型网站优化技术）

减少HTTP请求(大型网站优化技术)

亚马逊云服务安装magneto How To Install Magento On Amazon EC2

调整谷歌reCAPTCHA大小 How to resize the Google noCAPTCHA reCAPTCHA

如何计算神秘的Google Adwords 品质分数– 提升到10分神的境界

利用Gtmetrix检测你的网站载入速度！

Facebook轮播连结广告可展示5个图像与连结

Google我的商家设定

品牌不可不知的YouTube的影片行销策略

嵌入谷歌文档 Embed Google Doc Viewer: Display Google Drive Documents, SpreadSheets, PD

谷歌地图标记切换 Move Google Maps Markers: Change (Update) Marker position on Google Map

谷歌无地图地址自动完成Google Places AutoComplete example without using Maps

Google Maps V3: 通过经纬度获取地址信息 Get address from Latitude and Longitude

点击谷歌地图后获取经纬度 Get Latitude and Longitude (Location Coordinates) using Google Maps

最近访客更多访客>>

YouTube怎么判断影片内含侵权内容？解析Content ID内容识别系统的原理及功能