使用Google Chart API绘制组合图

 

Google Chart API 绘图 组合图
作者:方倍工作室 
地址:

 

<!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="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['corechart']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
        // Some raw data (not necessarily accurate)
        var data = google.visualization.arrayToDataTable([
          ['时间',  'W', 'F'],
          ['2013/01/11',  165,      14.6],
          ['2013/02/12',  135,      22],
          ['2013/03/12',  157,      12],
          ['2013/04/12',  139,      19.4],
          ['2013/05/12',  136,      19.6]
        ]);

        var options = {
          title : '张三',
          vAxis: {title: "指数"},
          hAxis: {title: "时间"},
          seriesType: "bars",
          series: {1: {type: "line"}}
        };

        var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
      google.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 600;"></div>
  </body>
</html>
 

 

 

 

时间: 2024-08-02 04:38:34

使用Google Chart API绘制组合图的相关文章

Google Chart API 参考 中文版

Google Chart API 参考 中文版 文档信息 翻译: Cloudream ,最后修改:02/22/2008 06:11:08 英文版版权归 Google , 转载此中文版必须以链接形式注明原文地址.译者信息及本声明. API 参考:http://labs.cloudream.name/google/chart/api.html 常见问题:http://labs.cloudream.name/google/chart/faq.html 简介 Google Chart API 为您提供动

Google Chart API

上周,Google公布了制图服务(Google Chart)的接口,可以用来为统计数据自动生成图片. 这项服务用起来相当简单,不用安装任何软件,只使用浏览器就可以.比如,在浏览器的地址栏中,键入如下的地址: http://chart.apis.google.com/chart?cht=p3&chd=s:hW&chs=250x100&chl=Hello|World&chtt=Hello+World, 就可以看到下面的图片: 各个参数的含义: * cht(chart type)

ASP.NET关于使用chart.js绘制线形图的问题

问题描述 我使用chart.js画线形图,有几个筛选条件,第一次绘制没有问题,当第二绘制时显示的是正确的线形图,可是当鼠标在线形图上滑动的时候会出现第一次的线形图跟第二次的线形图闪烁,来回切换的情况<div><canvasid="can_LineChart"width="950"height="400"style="margin-top:40px;margin-left:20px;"></canv

前端-chart.js中环形图显示数据的宽度

问题描述 chart.js中环形图显示数据的宽度 chart.js绘制环形图,鼠标放在上面显示的数据,如何改变其显示宽度?

前端-chart.js中环形图的标签的宽度

问题描述 chart.js中环形图的标签的宽度 用chart.js绘制环形图or饼状图,标签(label)的宽度如何设置??

Google搜索新增数学函数图象绘制功能

Google搜索新增数学函数图象绘制功能Google总是能不断的给我们带来惊喜.现在,Google搜索又新增数学函数图象绘制功能.Google搜索y=x 就会有惊喜.在Google 搜索输入一个数学函数 表达式,Google会在第一个结果给出它的函数图象.当鼠标滑过这个图象的时候,会给出函数的值.方便又强大!需要注意的是搜索的函数表达式需要是计算器认识的格式.例如,搜索函数y=cosx,Google是不识别的,而需要搜索y=cos(x)格式方可 得出函数图象.美丽的函数图像从最基础到稍微复杂的公

PHP中使用GD库绘制折线图 折线统计图的绘制方法_php实例

在PHP中,有一些简单的图像函数是可以直接使用的,但大多数要处理的图像,都需要在编译PHP时加上GD库.除了安装GD库之外,在PHP中还可能需要其他的库,这可以根据需要支持哪些图像格式而定.GD库可以在http://www.boutell.com/gd/免费下载,不同的GD版本支持的图像格式不完全一样,最新的GD库版本支持GIF.JPEG.PNG.WBMP.XBM等格式的图像文件,此外还支持一些如FreeType.Type 1等字体库.通过GD库中的函数可以完成各种点.线.几何图形.文本及颜色的

基于google图表API的jquery组件全攻略:基础入门

gchart:基于google图表API的jquery组件全攻略--入门 gchart是基于google图表API的jquery组件.使用gchart可以方便地生成强大的各种图表和报表.基于google图表接口的gchart,有着简单.方便.强大.够用.好用的特点.<gchart:基于jquery的google图表接口组件全攻略>系列文章将带你走入gchart的报表世界. 先解释一下这个拗口的标题 google图表API: google图表API是google提供的一个可以生成各种图表的api

基于google map api开发web和google earth的KML地标插件

KML文件很好做,在你的google earth(以下简称GE)中选择你自己的或是别人的marker或layer,就可以保存成静态的地标或图层信息(kmz或kml格式),发送给你的朋友,用他的GE打开你的文件就可以看到你所标注的marker信息. 这些相关的文章让我迷失了好一段时间,不过,我想要的是动态的地标.类似于EEMAP那样的GE插件.下面我将讲述它的工作原理和制做方法. 先说几个概念,google map api是基于javascript+xml等技术实现的,另一款产品google ea