前端开发 —— google chart 的使用
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 的使用的更多相关文章
- Web前端开发规范文档（google规范）
(Xee:其实没什么规范约束,但是养成一种好习惯,何乐而不为?) 区分大小写 xhtml 区分大小写,xhtml要求 标签名 属性名 值都要小写,并且要有双引号和 标签闭合. css 元素名称以及i ...
- 我在阿里这仨月 前端开发流程 前端进阶的思考 延伸学习的方式很简单：google 一个关键词你能看到十几篇优秀的博文，再这些博文中寻找新的关键字，直到整个大知识点得到突破
我在阿里这仨月 Alibaba 试用期是三个月,转眼三个月过去了,也到了转正述职的时间.回想这三个月做过的事情,很多很杂,但还是有重点. 本文谈一谈工作中遇到的各种场景,需要用到的一些前端知识,以及我 ...
- 【收藏】Web前端开发第三方插件大全
收集整理了一些Web前端开发比较成熟的第三方插件,分享给大家. ******************************************************************** ...
- 【分享】Web前端开发第三方插件大全
收集整理了一些Web前端开发比较成熟的第三方插件,分享给大家. ******************************************************************** ...
- CDN公共库、前端开发常用插件一览表(VendorPluginLib)
=======================================================================================前端CDN公共库===== ...
- 移动web页面前端开发总结
移动web在当今的发展速度是一日千里,作为移动领域的门外汉,在这段时间的接触后,发现前端开发这一块做一个小小的总结. 1.四大浏览器内核 1.Trident (IE浏览器) :因为在早期IE占有大量的 ...
- 4. web前端开发分享-css,js工具篇
web前端开发乃及其它的相关开发,推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs.emmet.io, ...
- web前端开发学习内容
应该 具备的 知识技能 :懂web标准,熟练手写 xhtml css3 并符合 符合w3c标准 代码能 兼容主流浏览器.ie6.7.8.9 ff 等. ...
- Web前端开发工程师养成计划【转载】
Web前端开发工程师养成计划(入门篇) 最原始的忠告:这个世界上有想法的人很多,但是有想法又能实现它的人太少! 首先要感谢伟大的Web2.0概念.产品概念.用户体验概念.jQuery插件,是它们在中国 ...
随机推荐
- pyqt 实现的俄罗斯方块
from PyQt5.QtWidgets import QMainWindow, QFrame, QDesktopWidget, QApplication from PyQt5.QtCore impo ...
- 网站链接facebook 拿新的post
$http({ method: "GET", url: "https://graph.facebook.com/oauth/access_token?client_id= ...
- Javascript 面向对象-继承
JavaScript虽然不是面向对象的语言,但是我们通过构造可以让其支持面向对象,从而实现继承.重写等面向对象的特性.具体代码如下: //创建类Person function Person(age,n ...
- Appium 坑
1. [Android]click没有反应 https://testerhome.com/topics/9610 在某些手机上有个安全选项,需要在开发者选项->安全设置(允许模拟点击),打开开关
- memcached哈希表操作主要逻辑笔记
以下注释的源代码都在memcached项目的assoc.c文件中 /* how many powers of 2's worth of buckets we use */ unsigned int h ...
- Spring Boot 介绍
Spring Boot 能够让你更加容易创建一个独立启动,产品化的,并且是基于 Spring 的应用程序.我们为 Spring 平台及第三方库提供开箱即用的设置,这样你就可以有条不紊的开始开发,减少在 ...
- 简话Angular 01 初识Angular 数据绑定
1. Angular有哪些突出优点 1) MVC 基于Html-Javascript 2) 依赖注入 3) 数据双向绑定,响应式页面设计 4) 模块化,自定义指令 2. 简话数据绑定 1) 代码: & ...
- spring boot学习(十三)SpringBoot缓存(EhCache 2.x 篇)
SpringBoot 缓存(EhCache 2.x 篇) SpringBoot 缓存 在 Spring Boot中,通过@EnableCaching注解自动化配置合适的缓存管理器(CacheManag ...
- BZOJ一天提交(AC) 51纪念
像我这种蒟蒻...一天交了51道题也要纪念... 真是...但是.不知道还有没有机会了... 这样子就会有很多题解要补了...慢慢来吧... 另.AC数已经超过500了还真是历史性的一步啊...
- Tarjan 算法求强联通分量
转载自:http://blog.csdn.net/xinghongduo/article/details/6195337 还是没懂Tarjan算法的原理.但是感觉.讲的很有道理. 说到以Tarjan命 ...