HighCharts

摘要

HighCharts是眼下最为流行的图表插件,应用范围广泛,眼下支持曲线图、区域图、3D图、柱状图、饼图、散列图、混合图等，而且还支持一些拓展的特殊图表，如：仪表图、极地图、箱线图、瀑布图等。因工作中用到，所以在这里我仅仅做最主要的配置使用。

官方站点:www.highcharts.com,有兴趣的同学也能够去上面学习很多其它的内容。

使用

首先须要到下载安装包 - highcharts下载

解压，然后导入两个js文件，然后写代码。举个官网上最简单的样例：

<!doctype html><head>

  <meta charset="utf-8" />

  <script src="文件所在路径/jquery-1.8.3.js"></script>

  <script src="文件所在路径/highcharts.js"></script>

  <script>

    $(function () {

    $('#chart').highcharts({

        title: {

            text: 'xxx图表'//指定图表标题

        },

        xAxis: {

            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], //指定x轴标签

            labels : //定义x轴标签的样式

            {

                    rotation : -80 ,

                    fontStyle : 'italic',

                    style: {

                        fontSize:'',

                        fontFamily: '微软雅黑'

                    }

            }

        },

        yAxis: {

            title: {

                text: 'Temperature (°C)'  //指定y轴标题

            }

        },

        tooltip: {

            valueSuffix: '°C'   //指定鼠标移动到某个点上的提示框单位

        },

        legend: {  //

            layout: 'vertical',

            align: 'right',

            verticalAlign: 'middle',

            borderWidth: 0

        },

        series: [{

            name: '温度',

            type:'column', //指定图表类型 为柱状图，默觉得折线图。

            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] //y轴数据

        }]

    });

});

  </script></head><body>

  <div id="chart" style="min-width:700px;height:400px"></div></body></html>

直接将以上代码粘贴到文件里，改动一下js路径，执行就能够。

还能够支持动态拓展，比方：动态添加y轴，动态改动标题等等。

//获取highcharts对象

chart = $('#chart').highcharts();

//

chart.addAxis({

    id: 'precipitation',

    title: {

        text: '降雨量'

    },

    lineWidth: 2,

    lineColor: '#08F',

    labels: {

        format: '{value} mm',

        style: {

            color: '#08F'

        }

    },

    opposite: true //在右边轴显示 ， 用于须要两边轴都须要显示的情况。

});

chart.addSeries({

    name: '降雨量',

    type: 'column',

    color: '#08F',

    yAxis: 'precipitation',

    data: precipitationDatas,

    tooltip: {

        valueSuffix: 'mm'

    }

});

//动态删除y轴。

chart.get("precipitation").remove();

这个就是执行起来的图。

OK， 就到这里。

HighCharts基本使用实例(入门)的更多相关文章

  1. XML实例入门2

    工具:notepad++.VS2008(MSXML6.0) 来自msdn的例子(经过修改,因为升级到MSXML6.0,有些关键字不太一样了), 需要文件books.xml,books.vsd(博客只支 ...

  2. Kivy 中文教程 实例入门 简易画板 (Simple Paint App)：1. 自定义窗口部件 (widget)

    1. 框架代码 用 PyCharm 新建一个名为 SimplePaintApp 的项目,然后新建一个名为 simple_paint_app.py 的 Python 源文件, 在代码编辑器中,输入以下框 ...

  3. Kivy crash 中文教程 实例入门 1. 第1个应用 Kivy App (Making a simple App)

    1.  空白窗口 在 PyCharm 中创建一个名为 TutorialApp 的项目,然后在该项目中新建了个名为 tutorial_app.py 的 Python 源文件,在 PyCharm 的代码编 ...

  4. Kivy 中文教程 实例入门 简易画板 (Simple Paint App)：3. 随机颜色及清除按钮

    1. 随机颜色 通过前面的教程,咪博士已经带大家实现了画板的绘图功能.但是,现在画板只能画出黄色的图案,还十分单调,接下来咪博士就教大家,如何使用随机颜色,让画板变得五彩斑斓. 改进后的代码如下: f ...

  5. Kivy 中文教程 实例入门 简易画板 (Simple Paint App)：2. 实现绘图功能

    1. 理解 kivy 坐标系统 上一节中,咪博士带大家实现了画板程序的基础框架,以及一个基本的自定义窗口部件(widget).在上一节的末尾,咪博士留了一道关于 kivy 坐标系统的思考题给大家.通过 ...

  6. Kivy 中文教程 实例入门 简易画板 (Simple Paint App)：0. 项目简介 & 成果展示

    本教程咪博士将带领大家学习创建自己的窗口部件 (widget).最终,我们完成的作品是一个简易的画板程序. 当用 kivy 创建应用时,我们需要仔细思考以下 3 个问题: 我们创建的应用需要处理什么数 ...

  7. React实例入门教程(1)基础API,JSX语法--hello world

      前  言 毫无疑问,react是目前最最热门的框架(没有之一),了解并学习使用React,可以说是现在每个前端工程师都需要的. 在前端领域,一个框架为何会如此之火爆,无外乎两个原因:性能优秀,开发 ...

  8. 【原创】React实例入门教程(1)基础API,JSX语法--hello world

    前  言 毫无疑问,react是目前最最热门的框架(没有之一),了解并学习使用React,可以说是现在每个前端工程师都需要的. 在前端领域,一个框架为何会如此之火爆,无外乎两个原因:性能优秀,开发效率 ...

  9. Vue2.0 【第四季】第1节 实例入门-实例属性

    目录 Vue2.0 [第四季]第1节 实例入门-实例属性 第1节 实例入门-实例属性 一.Vue和Jquery.js一起使用 二.实例调用自定义方法 Vue2.0 [第四季]第1节 实例入门-实例属性 ...

随机推荐

  1. STM32系统时钟

    一.时钟树 STM32有4个时钟源: 1)HSE(高速外部时钟源) 外部晶振作为时钟源,范围为4~16MHz,常取为8MHz 2)HSI(高速内部时钟源) 由内部RC振荡器产生,频率为8MHz,但不稳 ...

  2. hibernate配置文件详细解释

    <!--标准的XML文件的起始行,version='1.0'表明XML的版本,encoding='gb2312'表明XML文件的编码方式--> <?xml version='1.0' ...

  3. MySQL安装(以程序的方式启动)zip版

    电脑环境 win10 64位 企业版 1.解压zip文件到某路径下. 2.复制目录下的my-default.ini 改名字(my.ini) 3.打开my.ini [mysqld]下面加上charact ...

  4. smarty 比较运算符对照表

    smarty 比较运算符对照表  运算符 中文解释 eq 相等 ne.neq 不相等 gt 大于 lt 小于 gte.ge 大于等于 lte.le 小于等于 not 非 mod 求模 is [not] ...

  5. poj 1273

    网络流之最大流的基础题: 可以使用dinic算法和EK算法: 分别对着模板敲了一遍: dinic: #include<cstdio> #include<cstring> #in ...

  6. 制作qtopia-2.2.0和qt4文件系统

    转自 rootfs_qtopia_qt4.img 1. 解压rootfs_qtopia_qt4-20100816.tar.gz,得到目录rootfs_qtopia_qt4,里面内容比较大,超过了64M ...

  7. WINDOWS WMI--这是一个神奇的应用

    运行:wbemtest.exe

  8. easyui的datagrid组件，如何设置点击某行不会高亮该行的方式

    easyui的datagrid组件,有些时候我们点击某行不想高亮显示,如何设置点击某行不会高亮该行的方式,有好几种方法可以实现,我举几个,可以根据你具体需求灵活应用: 1.修改easyui的css将高 ...

  9. [wikioi]传纸条

    http://wikioi.com/problem/1169/ 棋盘型的动态规划,这道题可以看成是从左上角向右下角走两条不重合的路(除了开始和结尾).动态规划要想的是状态和阶段,状态是(x1,y1,x ...

  10. 内存卡的class是什么意思 内存卡class的5个等级

    内存卡的class是什么意思 SD协会针对TF内存卡(SDHC)的传输规范:传输速度(写入速度及读取速度的最低速度)被定义为Class2(2MB/sec).Class4(4MB/sec).Class6 ...