关键字：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. mybatis generator 使用

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  2. Android架构分析之Android消息处理机制（二）

    作者:刘昊昱 博客:http://blog.csdn.net/liuhaoyutz Android版本号:4.4.2 在上一篇文章中我们看了一个使用Handler处理Message消息的样例,本文我们 ...

  3. Matplot中文乱码完美解决方式

    一.改动matplotlibrc文件 (永久解决方式) 1. 定位matplotlibrc文件 该文件位于[python_install_dir]\Lib\site-packages\matplotl ...

  4. jfinal-QuartzPlugin后台任务调度

    配置方法: 1. 在jfinal的Start.java中插件位置配置QuartzPlugin /** * 配置插件 */ public void configPlugin(Plugins me) { ...

  5. QStyleFactory类参考

      QStyleFactory类创建QStyle对象.#include <QStyleFactory> 静态公有成员QStyle* create(const QString & k ...

  6. WPF遇到无边框的问题

    今天做一个项目采用的是WPF开发并且在制作窗体的时候用到无边框的问题,由于WPF开发和winform开发用点不一样, 遇到了这个问题就帮这个遇到问题的解决方法写下来方便以后忘记了和给一些遇到的朋友做一 ...

  7. CentOS7安装小小输入法

    添加epel源 $ sudo yum install epel-release 安装centos7缺失依赖包 libwayland-client $ sudo rpm -Uvh ftp://ftp.p ...

  8. 系统监控、诊断工具之top

    大家对top 命令可能不会陌生,它的作用主要用来监控系统实时负载率.进程的资源占用率及其它各项系统状态属性是否正常. top命令的截图如下: (1)系统.任务统计信息: 前8行是系统整体的统计信息.第 ...

  9. 技术QQ群

    欢迎加入moss技术交流群. 欢迎加入微信技术交流群.

  10. Windows 7 SP1 x64 旗舰版 微软官方安装U盘的制作

    [ 本主题由 中山艹泥喵 于 2013-08-20 23:14:33 设为精华1,原因:不错~ ] 最后由 风中枯萎 于 2015-12-15 17:44:15 修改 安装Windows 7操作系统主 ...