Google Chart API学习(一)

最新推荐文章于 2024-08-25 10:01:48 发布
最新推荐文章于 2024-08-25 10:01:48 发布
阅读量243 收藏 4
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/iamconan/p/7383536.html
版权

圆饼示例：

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1],
          ['Zucchini', 3],
          ['Pepperoni', 2]
        ]);

        // Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':800,
                       'height':600};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>
运行效果：



annotation-charts

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['annotationchart']}]}"></script>
    <script type='text/javascript'>
      google.load('visualization', '1', {'packages':['annotationchart']});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'test1');
        data.addColumn('string', 'test2');
        data.addColumn('string', 'test3');
        data.addColumn('number', 'test4');
        data.addColumn('string', 'test5');
        data.addColumn('string', 'test6');
        data.addRows([
          [new Date(2014, 2, 15), 12400, undefined, undefined,
                                  10645, undefined, undefined],
          [new Date(2114, 2, 16), 24045, 'hello1', 'hello2',
                                  12374, undefined, undefined],
          [new Date(2314, 2, 17), 35022, 'hello3', 'hello4',
                                  15766, 'hello5', 'hell06'],
          [new Date(2314, 2, 18), 12284, 'hello7', 'hello8',
                                  34334, 'hello9', 'hello10'],
          [new Date(2314, 2, 19), 8476, 'hello11', 'hello12',
                                  66467, 'hello13', 'hello14'],
          [new Date(2314, 2, 20), 0, 'hello15', 'hello16',
                                  79463, 'hello17', 'hello18']
        ]);

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

        var options = {
          displayAnnotations: true
        };

        chart.draw(data, options);
      }
    </script>
  </head>

  <body>
    <div id='chart_div' style='width: 900px; height: 500px;'></div>
  </body>
</html>
效果图：

area-charts:

<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 = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2013',  1000,      400],
          ['2014',  1170,      460],
          ['2015',  660,       1120],
          ['2016',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance',
          hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
          vAxis: {minValue: 0}
        };

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


效果图：



bar-charts:

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1.1", {packages:["bar"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses', 'Profit'],
          ['2014', 1000, 400, 200],
          ['2015', 1170, 460, 250],
          ['2016', 660, 1120, 300],
          ['2017', 1030, 540, 350]
        ]);

        var options = {
          chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
          },
          bars: 'horizontal' // Required for Material Bar Charts.
        };

        var chart = new google.charts.Bar(document.getElementById('barchart_material'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="barchart_material" style="width: 900px; height: 500px;"></div>
  </body>
</html>


效果图：



bubble-charts：

<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 = google.visualization.arrayToDataTable([
          ['ID', 'X', 'Y', 'Temperature'],
          ['',   80,  167,      120],
          ['',   79,  136,      130],
          ['',   78,  184,      50],
          ['',   72,  278,      230],
          ['',   81,  200,      210],
          ['',   72,  170,      100],
          ['',   68,  477,      80]
        ]);

        var options = {
          colorAxis: {colors: ['yellow', 'red']}
        };

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

效果图：



calendar-charts:

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1.1", {packages:["calendar"]});
      google.setOnLoadCallback(drawChart);

   function drawChart() {
       var dataTable = new google.visualization.DataTable();
       dataTable.addColumn({ type: 'date', id: 'Date' });
       dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
       dataTable.addRows([
          [ new Date(2012, 3, 13), 37032 ],
          [ new Date(2012, 3, 14), 38024 ],
          [ new Date(2012, 3, 15), 38024 ],
          [ new Date(2012, 3, 16), 38108 ],
          [ new Date(2012, 3, 17), 38229 ],
          // Many rows omitted for brevity.
          [ new Date(2013, 9, 4), 38177 ],
          [ new Date(2013, 9, 5), 38705 ],
          [ new Date(2013, 9, 12), 38210 ],
          [ new Date(2013, 9, 13), 38029 ],
          [ new Date(2013, 9, 19), 38823 ],
          [ new Date(2013, 9, 23), 38345 ],
          [ new Date(2013, 9, 24), 38436 ],
          [ new Date(2013, 9, 30), 38447 ]
        ]);

       var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));

       var options = {
         title: "Red Sox Attendance",
         height: 350,
       };

       chart.draw(dataTable, options);
   }
    </script>
  </head>
  <body>
    <div id="calendar_basic" style="width: 1000px; height: 350px;"></div>
  </body>
</html>
效果图：



candlestick-charts:

<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 = google.visualization.arrayToDataTable([
      ['Mon', 20, 28, 38, 45],
      ['Tue', 31, 38, 55, 66],
      ['Wed', 50, 55, 77, 80],
      ['Thu', 77, 77, 66, 50],
      ['Fri', 68, 66, 22, 15]
      // Treat first row as data as well.
    ], true);

    var options = {
      legend:'none'
    };

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

    chart.draw(data, options);
  }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>


效果图：




column-charts:

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1.1", {packages:["bar"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses', 'Profit'],
          ['2014', 1000, 400, 200],
          ['2015', 1170, 460, 250],
          ['2016', 660, 1120, 300],
          ['2017', 1030, 540, 350]
        ]);

        var options = {
          chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
          }
        };

        var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="columnchart_material" style="width: 900px; height: 500px;"></div>
  </body>
</html>

效果图：



转载于:https://www.cnblogs.com/iamconan/p/7383536.html

dianti5444
关注
m2googlechart:演示从 Matlab 访问 Java 类以生成 Google Chart API 图。-matlab开发
06-01
一个脚本 m 文件和一个 Java 类，用于为 Google Chart API 生成 Matlab 数据的线图。 还包含一个函数 m 文件，可用于在纯 Matlab 中为 Google Chart API 加密数据。
使用Google Chart API绘制组合图
weixin_34023982的博客
08-19 142
  Google Chart API 绘图 组合图作者：方倍工作室 地址：   &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999...
Google Charts 开源项目教程
最新发布
gitblog_00637的博客
08-25 393
Google Charts 开源项目教程 项目地址:https://gitcode.com/gh_mirrors/go/googlecharts 项目介绍 Google Charts 是一个强大的图表工具集，由谷歌提供，它允许开发者在网页和移动设备上轻松创建交互式图表。这些图表覆盖了从简单线条图到复杂的组织图等多个类型，且支持高度定制。项目是免费的，并保证三年的向后兼容性，确保了其在各种浏览器及平...
使用Google Chart API 创建实时图表
allway2的博客
11-22 2824
实时图表可以实时显示数据。这意味着数据将永久更新以始终显示当前图表。要创建实时图表，我们使用JavaScript和Google Chart API。 这些实时图表通常用于仪表板中，以显示例如温度或价格的变化情况。应用领域多样，它们看起来确实不错。你自己看！ 实时图表–折线图 我在这里向您展示，您可以创建此实时图表。它每250毫秒更新一次，并显示（在我们的示例中）随机数据。在生产性使用中，它可以从数据库或直接从传感器读取和显示数据。 那不是全部。可以将相同的概念1：1转移到其他图表中...
初识Google Chart API
WalkingAlien World
08-27 2304
Google Chart API 提供动态创建图表的功能，可以直接利用Google Chart API 的链接参数来实现各种统计图表的制作。使用方法很简单，在放置图片的web代码中用链接及参数调用即可.
Google Chart API学习(二)
dianti5444的博客
10-09 197
书接上回： combo-charts: <html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> goog...
google-chart：Google Charts API网络组件
01-29
npm i @google-web-components/google-chart 在HTML文件中 < html > < head > < script type =" module " > import '@google-web-components/google-chart' ; </ script > </ head ...
如何利用Google chart API产生二维码
12-24
Google Chart API 是一个强大的工具，能够帮助开发者轻松创建包括二维码在内的各种图表。本文将深入讲解如何利用Google Chart API来生成二维码，并结合前端技术实现用户交互。 首先，让我们了解什么是Google Chart ...
phpgc:这是Google Chart API包装器类
05-15
这实际上是作为Google Chart API的包装。 使用此phpgc，您可以轻松地将数据可视化到Web应用程序中。 安装 在您的composer.json文件中写入"sohelrana820/phpgc": "dev-master"以进行安装。 如果要手动安装，则下载此...
Google Chart API
zshulicnibmcom的博客
12-21 132
Google Chart API提供了一整套的JS框架用于制作各种类型的图标 http://code.google.com/intl/zh-CN/apis/chart/index.html 另外还有一套REST API用于动态的生成这些图标的图片，可以用的方式直接在网页中使用 http://code.google.com/intl/en/apis/chart/image/...
googlecharts:用于 Amber 的 Google Charts API
07-11
#googlecharts 用于 Amber 的 Google Charts API 项目维基 提供了Hacking Docs ，包含有关该的目标、设计和更新的文档。 ##作者 Thomas W Rake ##Availability 在分叉 此项目是的子项目 如果您克隆该项目，则应将此项目作为子项目。 ##Cloning 如果您获得 GoogleCharts 作为子模块，则必须更新源。 如果您克隆主要的或您必须更新子模块以获取源代码。 下面的代码应该这样做： git submodule init git submodule update 你需要知道的 ##Version 0.3 此 API 可能会在未来版本中更改。 创建 ChartApp 的秘诀 基本 HTML 文档： <title>谷歌图表</title> <script src="../../js/amb
GChart:Google Chart APIPHP库-开源
04-13
GChart是Google Chart APIPHP库。 Google Chart API可让您动态生成图表。 但是，使用起来并不方便。 GChart使您可以更轻松地在PHP页面中插入Google Chart。
Google_Chart_API_开发指南.pdf
09-08
Google Chart API 参考中文版
google-charts:使用 clojurescript 中的 Google Charts API 的库
07-08
谷歌图表 旨在简化使用 Google 图表 API 的 ClojureScript 库 用法 ###（绘制图表列向量选项图表） columns [["number" "X"] ["number" "Y"] ["type" "Title"]] vectors [[X1 Y1] [X2 Y2]] The number of columns must match the number of datapoints options {:option value} chart (new js/google.visualization.TypeOfChart DOM-element) 执照 版权所有 :copyright: 2014 弗兰克伯纳姆 在 Eclipse Public License version 1.0 下分发。
Google_Chart_开发指南中文版
10-08
Google图表API是一个免费的、非常强劲的图表生成工具，您可以仅凭一个Url地址，轻松生成一张具有专业水准的图表。 Google 图表 API 会返回一幅 PNG 格式的图片来响应一个网址。可以生成多种类型的图片，包括折线图、条形图和饼图。您可以为每种图片类型指定属性，例如大小、颜色和标签。 本文介绍了实现图表功能的api！
Google Chart API 介绍
clguf20020的专栏
08-19 376
Google Chart API返回一个与输入的URL相对应的PNG格式的图像。能够生成几种类型的图像，例如折线图、条形图、饼图。对每种类型，能指定其属性，例如大小、颜色和标签。通过在标签里嵌入URL，在网页中包含Chart A...
Google Chart API 中文开发指南
Google Chart API 是一种由Google提供的服务，它允许开发者通过简单的HTTP请求生成各种类型的图表，并将其嵌入到网页或其他应用中。这个API支持动态创建图表，使得数据可视化变得更为便捷。下面是对Google Chart API...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值