使用Google Chart API绘制组合图

简介: Google Chart API 绘图 组合图作者:方倍工作室 地址:   DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.

 

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>
 

 

 

 

目录
相关文章
|
2月前
|
人工智能 Java API
Google Gemini API 接口调用方法
Google 最近发布的 Gemini 1.0 AI 模型通过其升级版,Gemini,标志着公司迄今为止最为强大和多功能的人工智能技术的突破。
|
2月前
|
数据挖掘 定位技术 计算机视觉
Google Earth Engine(GEE)——加拿大森林生态系统的高分辨率年度林地覆盖图(1984-2019)
Google Earth Engine(GEE)——加拿大森林生态系统的高分辨率年度林地覆盖图(1984-2019)
40 0
|
2月前
|
DataWorks 安全 数据可视化
DataWorks Embed API - 手把手教您在自建的 Web 嵌入 DataWorks 数据血缘图
DataWorks 提供丰富的数据可视化界面,让用户能轻松地透过界面操作大数据业务,但仍有集成至自建 Web 界面的需求,减少切换页面的频率。下文就以透过阿里云令牌服务结合自建 Web 界面代理登录阿里云,做到嵌入DataWorks数据地图的血缘图。
148 1
DataWorks Embed API - 手把手教您在自建的 Web 嵌入 DataWorks 数据血缘图
|
18天前
|
域名解析 JavaScript 网络协议
技术心得记录:如何使用google地图的api(整理)
技术心得记录:如何使用google地图的api(整理)
24 0
|
2月前
|
存储 数据采集 JSON
电商API分享:如何批量获取商品详情页数据(属性图价格sku视频评论)
电商API(应用程序接口)通常提供了丰富的数据获取功能,使开发者能够方便地获取商品详情页的各种数据,包括商品属性、图片、价格、SKU(库存量单位)、视频以及评论等。以下是一个基本的步骤指南,用于通过电商API批量获取商品详情页数据:
|
2月前
|
JavaScript 前端开发 Java
淘宝/天猫获取sku详细信息 API接口(如何抓取别人的sku图淘宝)
淘宝/天猫平台提供了获取商品SKU(Stock Keeping Unit,库存量单位)详细信息的API接口。SKU通常代表一种具有独特属性的商品变体,如颜色、尺寸等。为了获取淘宝/天猫商品的SKU详细信息,您可以遵循以下步骤:
|
2月前
Google Earth Engine(GEE)——如何建立一个逐日的时序图表chart用map进行遍历
Google Earth Engine(GEE)——如何建立一个逐日的时序图表chart用map进行遍历
30 0
|
2月前
|
JSON 搜索推荐 API
【2024更新】如何使用google index api来自动提交url
本文提供了一个详细的指南,说明如何创建并使用使用google index api,google自动提交url来优化seo。
83 0
|
9月前
|
关系型数据库 MySQL API
Go语言微服务框架 - 6.用Google风格的API接口打通MySQL操作
随着RPC与MySQL的打通,整个框架已经开始打通了数据的出入口。 接下来,我们就尝试着实现通过RPC请求操作MySQL数据库,打通整个链路,真正地让这个平台实现可用。
27 0
|
缓存 监控 前端开发
一张图告诉你如何提高 API 性能
如何提升 API 性能呢?本文分享了 5 个常见的提高 API 性能的技巧。
87 0