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. c++ 对符合条件的元素进行计数（count_if）

    #include <iostream> // cout #include <algorithm> // count_if #include <vector> // ...

  2. json 与 string 互转

    1. json字符串转换成json对象 js: JSON.parse('{"age":"28"}') eval('(' + '{"age": ...

  3. [don't have permission to access]的一个经典原因

    那就是 ..... SELinux ...... 几年前好像经历过这个恶梦.现在又经历了一回. 从Windows上传了一个目录,做一个apache的别名Alias, 结果总是没有权限. chmod 7 ...

  4. 雷林鹏分享：C# 运算符重载

    C# 运算符重载 您可以重定义或重载 C# 中内置的运算符.因此,程序员也可以使用用户自定义类型的运算符.重载运算符是具有特殊名称的函数,是通过关键字 operator 后跟运算符的符号来定义的.与其 ...

  5. Java基础-封装(09)

    通过对象直接访问成员变量,会存在数据安全问题(比如年龄不能为负).这个时候,我们就不能让外界的对象直接访问成员变量. private关键字 是一个权限修饰符.可以修饰成员(成员变量和成员方法)被pri ...

  6. Yet Another Ball Problem CodeForces - 1118E (简单构造)

    大意: 求构造n个pair, 每个pair满足 对于每k组, 让$b_i$为$[1,k]$, $g_i$循环右移就好了 int n, k, cnt; int main() { scanf(" ...

  7. Professional layer CodeForces - 1103D (状压,gcd)

    大意: 给定$n$元素序列$a$, 现在想要让$gcd(a_1,a_2,...,a_n)=1$. 对于每个$a_i$可以除以一个不超过$k$的因子, 代价为$e_i$, 假设一共选择了$x$个元素去除 ...

  8. bzoj2763: [JLOI2011]飞行路线 最短路

    题意:求最多可以有k条路免费的最短路 题解:用dis[x][k]表示从s开始用了k次免费机会到x的最短路,然后dij跑的时候优先队列里多维护一个k就好了 /********************** ...

  9. python 小练习 11

    桌子上有一堆数量不超过20的果子,每个果子的重量都是不超过20的正整数,全部记录在列表 L 里面.小明和小红决定平分它们,但是由于他们都太自私,没有人愿意对方比自己分得的总重量更多.而果子又不能切开, ...

  10. ABAP基础二：ALV基础之ALV的简单编辑

    前两天有个打印需求变更,需要在ALV显示列表中添加两个字段,可编辑,而我自己用的是函数:REUSE_ALV_GRID_DISPLAY_LVC 因为之前做可编辑基本都是固定套路,定义类,画屏幕.... ...