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. vs2013 IHttpActionResult NotFund Ok （WebAPI）

    vs2013  IHttpActionResult NotFund Ok   使用ASP.NET Web API构造基于restful风格web services,IHttpActionResult是 ...

  2. Remark of BLENDFUNCTION from MSDN

    Remarks When the AlphaFormat member is AC_SRC_ALPHA, the source bitmap must be 32 bpp. If it is not, ...

  3. Leaflet学习笔记-Leaflet.awesome-markers

    基础篇传送门 http://www.cnblogs.com/CoffeeEddy/p/4919987.html 效果图 是不是感觉很美观啊 为什么选择awesome 地图上面需要各种各样的Mark,难 ...

  4. hibernate配置文件详细解释

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

  5. 【Python网络爬虫三】 爬去网页新闻

    学弟又一个自然语言处理的项目,需要在网上爬一些文章,然后进行分词,刚好牛客这周的是从一个html中找到正文,就实践了一下.写了一个爬门户网站新闻的程序 需求: 从门户网站爬取新闻,将新闻标题,作者,时 ...

  6. (转) 各种好用的插件 Xcode

    时间就是金钱.编码效率的提升意味着更多的收入.可是当我们的开发技巧已经到达一定高度时,如何让开发效率更上一层楼呢?答案就是使用开发工具!在这篇文章中,我会向你介绍一些帮助我提升编码速度和工作效率的工具 ...

  7. AirPlay简介

    AirPlay是苹果公司在iOS4.2即Mac OS Mountain Lion中加入的一种播放技术.可以将iPhone.iPod.iPad和Mac上的视频镜像传送到支持AirPlay的设备上(如音响 ...

  8. android studio中文乱码的解决方法【转】

    一． 在android的源文件中的乱码问题 Android Studio安装后发现所有的中文,不管是界面上的还是输出的log中的中文都变成小框框,具体的解决方法如下, 可以肯定是字体的问题 解决:菜单 ...

  9. /etc/passwd 与 /etc/shadow

    /etc/passwd是用户数据库,其中的域给出了用户名.加密口令和用户的其他信息. /etc/shadow是在安装了影子(shadow)口令软件的系统上的影子口令文件.影子口令文件将/etc/pas ...

  10. Cocos2d-x win7下 android环境搭建

    原地址:http://blog.csdn.net/xingboss3/article/details/8267512/ 综合了以下三篇 http://www.cnblogs.com/lhming/ar ...