1. 引入所需的 js 库

  • <head></head>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi?autoload={
    'modules':[{
    'name':'visualization',
    'version':'1',
    'packages':['corechart']
    }]
    }"></script>

2. 简单绘制 line

<html>
<body>
<div id="chart" style="width: 800px; height: 600px"></div>
<script type="text/javascript">
....
</script>
</body>
</html>
  • 作用在某 div 元素上:

    var chart = new google.visualization.LineChart($('chart')[0]);
  • 表格选项:

    var options = {
    title: 'Temperature',
    curveType: 'function',
    animation: {
    duration: 1000,
    easing: 'in'
    },
    legend: {
    position: 'bottom'
    }
    }
  • 存储二维数组的 DataTable

    var data = google.visualization.arrayToDataTable([
    ['Time', 'Temperature'],
    [new Date().toLocaleTimeString(), 0]
    ]);
  • 绘制:

    chart.draw(data, options)

前端开发 —— google chart 的使用的更多相关文章

  1. Web前端开发规范文档(google规范)

    (Xee:其实没什么规范约束,但是养成一种好习惯,何乐而不为?) 区分大小写 xhtml  区分大小写,xhtml要求 标签名 属性名 值都要小写,并且要有双引号和 标签闭合. css 元素名称以及i ...

  2. 我在阿里这仨月 前端开发流程 前端进阶的思考 延伸学习的方式很简单:google 一个关键词你能看到十几篇优秀的博文,再这些博文中寻找新的关键字,直到整个大知识点得到突破

    我在阿里这仨月 Alibaba 试用期是三个月,转眼三个月过去了,也到了转正述职的时间.回想这三个月做过的事情,很多很杂,但还是有重点. 本文谈一谈工作中遇到的各种场景,需要用到的一些前端知识,以及我 ...

  3. 【收藏】Web前端开发第三方插件大全

    收集整理了一些Web前端开发比较成熟的第三方插件,分享给大家. ******************************************************************** ...

  4. 【分享】Web前端开发第三方插件大全

    收集整理了一些Web前端开发比较成熟的第三方插件,分享给大家. ******************************************************************** ...

  5. CDN公共库、前端开发常用插件一览表(VendorPluginLib)

    =======================================================================================前端CDN公共库===== ...

  6. 移动web页面前端开发总结

    移动web在当今的发展速度是一日千里,作为移动领域的门外汉,在这段时间的接触后,发现前端开发这一块做一个小小的总结. 1.四大浏览器内核 1.Trident (IE浏览器) :因为在早期IE占有大量的 ...

  7. 4. web前端开发分享-css,js工具篇

    web前端开发乃及其它的相关开发,推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs.emmet.io, ...

  8. web前端开发学习内容

    应该 具备的 知识技能 :懂web标准,熟练手写 xhtml css3 并符合 符合w3c标准                       代码能 兼容主流浏览器.ie6.7.8.9 ff 等.    ...

  9. Web前端开发工程师养成计划【转载】

    Web前端开发工程师养成计划(入门篇) 最原始的忠告:这个世界上有想法的人很多,但是有想法又能实现它的人太少! 首先要感谢伟大的Web2.0概念.产品概念.用户体验概念.jQuery插件,是它们在中国 ...

随机推荐

  1. Codeforces 768B - Code For 1(分治思想)

    768B - Code For 1 思路:类似于线段树的区间查询. 代码: #include<bits/stdc++.h> using namespace std; #define ll ...

  2. 一套C#语言的日志控制系统

    using System; public delegate void LogHandle(Object log); public class PlayerHandle { public static ...

  3. Python string常用函数

    2017-07-03 23:26:08 1..replace(self, old, new, count=-1) replace()函数将旧字符串替换为新字符串,最后一个参数count为可选项,表示替 ...

  4. javascript变量声明及作用域总结

    javascript变量声明及作用域总结 一.总结 一句话总结:还是得好好看书,光看视频是不得行的,浅学无用,要相互印证,要真正理解才有用,比如<Javascript权威指南> 书 1.j ...

  5. 安装 tensorflow 时遇到 OSError: [Errno 1] Operation not permitted 的解决办法

    Installing collected packages: numpy, scipy, six, pyyaml, Keras, opencv-python, h5py, html5lib, blea ...

  6. Confluence 6 使用 LDAP 授权连接一个内部目录 - 用户组 Schema 设置

    请注意:这部分仅在拷贝用户登录(Copy User on Login)和 同步组成员(Synchronize Group Memberships)被启用后可见. 其他用户组 DN(Additional ...

  7. 49 BOM 和DOM

    一.BOM window 对象  1.确认,输入,    window.alert(123) // 弹框    let ret = window.confirm("是否删除") / ...

  8. 解决执行脚本报syntax error: unexpected end of file或syntax error near unexpected token `fi'错误的问题

    参考:https://blog.csdn.net/u012453843/article/details/69803244 解决执行脚本报syntax error: unexpected end of ...

  9. 批量kill Linux环境下的任务

    批量kill Linux服务器的进程可以通过ps  grep  aws  xargs 进行结合来完成  比如要kill 全部test.sh 的进程 ps -ef |grep "test.sh ...

  10. Import Data from *.xlsx file to DB Table through OAF page(转)

    Use  Poi.jar Import Data from *.xlsx file to DB Table through OAF page Use Jxl.jar Import Data from ...