关键字：Highcharts

<!DOCTYPE HTML>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <title>Highcharts Example</title>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

        <script type="text/javascript">

            var content = {

                title: {

                    text: 'Monthly Average Temperature',

                    x: -20 //center

                },

                subtitle: {

                    text: 'Source: WorldClimate.com',

                    x: -20

                },

                xAxis: {

                    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',

                        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

                },

                yAxis: {

                    title: {

                        text: 'Temperature (°C)'

                    },

                    plotLines: [{

                        value: 0,

                        width: 1,

                        color: '#808080'

                    }]

                },

                tooltip: {

                    valueSuffix: '°C'

                },

                legend: {

                    layout: 'vertical',

                    align: 'right',

                    verticalAlign: 'middle',

                    borderWidth: 0

                },

                series: [{

                    name: 'Tokyo',

                    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]

                }, {

                    name: 'New York',

                    data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]

                }, {

                    name: 'Berlin',

                    data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]

                }, {

                    name: 'London',

                    data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]

                }]

            }

            $(function () {

                $('#container').highcharts(content);

            });

        </script>

    </head>

    <body>

        <script src="http://code.highcharts.com/highcharts.js"></script>

        <script src="http://code.highcharts.com/modules/exporting.js"></script>

        <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

    </body>

</html>

一个Highcharts的例子的更多相关文章

  1. 用一个简单的例子来理解python高阶函数

    ============================ 用一个简单的例子来理解python高阶函数 ============================ 最近在用mailx发送邮件, 写法大致如 ...

  2. Spring-Context之一:一个简单的例子

    很久之前就想系统的学习和掌握Spring框架,但是拖了很久都没有行动.现在趁着在外出差杂事不多,就花时间来由浅入深的研究下Spring框架.Spring框架这几年来已经发展成为一个巨无霸产品.从最初的 ...

  3. 高仿“点触验证码”做的一个静态Html例子

    先上源码: <html> <head> <title>TouClick - Designed By MrChu</title> <meta htt ...

  4. 关于apriori算法的一个简单的例子

    apriori算法是关联规则挖掘中很基础也很经典的一个算法,我认为很多教程出现大堆的公式不是很适合一个初学者理解.因此,本文列举一个简单的例子来演示下apriori算法的整个步骤. 下面这个表格是代表 ...

  5. 一个UWSGI的例子

    摘要:uwsgi执行顺序:启动master进程,执行python脚本的公共代码(import同一层).然后生成worker进程,uwsgi.post_fork_hook=init_functions, ...

  6. 扩展Python模块系列(二)----一个简单的例子

    本节使用一个简单的例子引出Python C/C++ API的详细使用方法.针对的是CPython的解释器. 目标:创建一个Python内建模块test,提供一个功能函数distance, 计算空间中两 ...

  7. fitnesse - 一个简单的例子（slim）

    fitnesse - 一个简单的例子(slim) 2017-09-30 目录1 编写测试代码(Fixture code)2 编写wiki page并运行  2.1 新建wikiPage  2.2 运行 ...

  8. Struts2的配置和一个简单的例子

    Struts2的配置和一个简单的例子 笔记仓库:https://github.com/nnngu/LearningNotes 简介 这篇文章主要讲如何在 IntelliJ IDEA 中使用 Strut ...

  9. 一个简单的例子搞懂ES6之Promise

    ES5中实现异步的常见方式不外乎以下几种: 1. 回调函数 2. 事件驱动 2. 自定义事件(根本上原理同事件驱动相同) 而ES6中的Promise的出现就使得异步变得非常简单.promise中的异步 ...

随机推荐

  1. 转换流--OutputStreamWriter类与InputStreamReader类

    12.4  转换流--OutputStreamWriter类与InputStreamReader类 整个IO包实际上分为字节流和字符流,可是除了这两个流之外,还存在一组字节流-字符流的转换类. Out ...

  2. ubuntu14.04 64bit 安装 &amp;&amp; 破解quartus13.0 记录

    安装文件:Quartus-13.0.0.156-linux.iso             Quartus-13.0.0.156-devices-1.iso 1.挂载:sudo mount -o lo ...

  3. 多线程读写共享变量时，synchronized与volatile的作用

    在<effective java>中看的的知识点,在工作中确实遇到了~ keywordsynchronized能够保证在同一时刻,仅仅有一个线程能够运行某一个方法,或者某一个代码块. 同步 ...

  4. VOA学习-South Sudan Must Allow Aid

    South Sudan Must Allow Aid The United States is gravelyconcerned by the serious escalation of the hu ...

  5. Java基础知识强化之集合框架笔记70：模拟斗地主洗牌和发牌（ArrayList）

    1. 模拟斗地主洗牌和发牌 分析:     A:创建一个牌盒     B:装牌     C:洗牌     D:发牌     E:看牌 2. 代码实现: package cn.itcast_03; im ...

  6. [置顶] asp.net(c#)中相对路径（虚拟路径）和物理磁盘路径的转换

    物理路径就是磁盘路径,也就是说是在磁盘上的位置,虚拟路径也就是web页面上的路径,是相对于应用程序而言的 /// <summary> /// 将物理路径转换成相对路径 /// </s ...

  7. AWS 命令行界面 + Python 的 AWS 开发工具包 (Boto3)

    安装AWS CLI $ pip install awscli 安装Boto3 $ pip install boto3 设置AWS CLI $ aws configure AWS Access Key ...

  8. Hessian

    一．远程通讯协议的基本原理 网络通信需要做的就是将流从一台计算机传输到另外一台计算机,基于传输协议和网络 IO 来实现,其中传输协议比较出名的有 http . tcp . udp 等等, http . ...

  9. C#中out和ref使用

    1.out必须在方法中为其赋值,在调用的时候必须在变量的前面加上out关键字,侧重输出. 2.ref修饰方法的参数,在调用的时候必须在变量的前面加上ref关键字,可以修改其值也可以不修改,侧重修改. ...

  10. 20151225jquery学习笔记---选项卡UI

    圣诞节快乐,哈哈哈....选项卡(tab),是一种能提供给用户在同一个页面切换不同内容的 UI. 尤其是在页面布局紧凑的页面上,提供了非常好的用户体验.一． 使用 tabs使用 tabs 比较简单,但 ...