前端开发 —— 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插件,是它们在中国 ...
随机推荐
- Codeforces Beta Round #94 div 2 C Statues dfs或者bfs
C. Statues time limit per test 2 seconds memory limit per test 256 megabytes input standard input ou ...
- bash 判断两个文件相等的代码
#!/bin/bash #定义参数 username="xxx" passwd="xxxxxxxx" dbname="xxx" #判断入参为 ...
- Idea设置默认不折叠一行的函数
- Codeforces 898F - Restoring the Expression(字符串hash)
898F - Restoring the Expression 思路:字符串hash,base是10,事实证明对2e64取模会T(也许ull很费时),对1e9+7取模. 代码: #include< ...
- threejs和3d各种效果的学习
写给即将开始threejs学习的自己,各种尝试,各种记忆.不要怕,灰色的年华终会过去. 一个技术学习的快慢,以及你的深刻程度,还有你的以后遇到这个东西的时候的反应速度,很大程度上,取决于你的博客的深刻 ...
- rsync+inotify文件同步
rsync+inotify文件同步 在服务器中,通常结合计划任务.shell脚本来执行本地备份.为了进一步提高备份的可靠性,使用异地备份也是非常重要的,利用rsync工具,可以实现快速.高效的异地备份 ...
- Vue组件(知识)
form最后一节. 组件基础 组件的复用: data必须是函数 组织 通过Prop向子组件传递data 单个根元素 通过event向父组件发送消息: 使用事件抛出一个value, 在组件上用v-mo ...
- codeforces 487a//Fight the Monster// Codeforces Round #278(Div. 1)
题意:打怪兽.可增加自己的属性,怎样在能打倒怪兽的情况下花费最少? 这题关键要找好二分的量.一开始我觉得,只要攻击到101,防御到100,就能必胜,于是我对自己的三个属性的和二分(0到201),内部三 ...
- Imbalance Value of a Tree CodeForces - 915F
链接 大意: 给定树, 求树上所有链上最大值最小值之差 817D的树上版本, 用并查集维护即可. 817D由于是链的情况并查集不必压缩路径即可达到均摊$O(n)$, 该题必须压缩, 复杂度$O(nlo ...
- UVA-818 Cutting Chains (位压缩+暴力搜索)
题目大意:一种环能打开和闭合.现在有n(1<=n<=15)个编号为1~n的环错综复杂的连接着,要打开一些环重新连接使这n个环能构成一条链,问最少需要打开几次环可达到目的? 题目分析:用二进 ...