HighCharts

摘要

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

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

使用

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

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

  1. <!doctype html><head>
  2.   <meta charset="utf-8" />
  3.   <script src="文件所在路径/jquery-1.8.3.js"></script>
  4.   <script src="文件所在路径/highcharts.js"></script>
  5.   <script>
  6.     $(function () {
  7.     $('#chart').highcharts({
  8.         title: {
  9.             text: 'xxx图表'//指定图表标题
  10.         },
  11.         xAxis: {
  12.             categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], //指定x轴标签
  13.             labels : //定义x轴标签的样式
  14.             {
  15.                     rotation : -80 ,
  16.                     fontStyle : 'italic',
  17.                     style: {
  18.                         fontSize:'',
  19.                         fontFamily: '微软雅黑'
  20.                     }
  21.             }
  22.         },
  23.         yAxis: {
  24.             title: {
  25.                 text: 'Temperature (°C)'  //指定y轴标题
  26.             }
  27.         },
  28.         tooltip: {
  29.             valueSuffix: '°C'   //指定鼠标移动到某个点上的提示框单位
  30.         },
  31.         legend: {  //
  32.             layout: 'vertical',
  33.             align: 'right',
  34.             verticalAlign: 'middle',
  35.             borderWidth: 0
  36.         },
  37.         series: [{
  38.             name: '温度',
  39.             type:'column', //指定图表类型 为柱状图，默觉得折线图。
  40.             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轴数据
  41.         }]
  42.     });
  43. });
  45.   </script></head><body>
  46.   <div id="chart" style="min-width:700px;height:400px"></div></body></html>

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

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

  1. //获取highcharts对象
  2. chart = $('#chart').highcharts();
  4. //
  5. chart.addAxis({
  6.     id: 'precipitation',
  7.     title: {
  8.         text: '降雨量'
  9.     },
  10.     lineWidth: 2,
  11.     lineColor: '#08F',
  12.     labels: {
  13.         format: '{value} mm',
  14.         style: {
  15.             color: '#08F'
  16.         }
  17.     },
  18.     opposite: true //在右边轴显示 ， 用于须要两边轴都须要显示的情况。
  19. });
  20. chart.addSeries({
  21.     name: '降雨量',
  22.     type: 'column',
  23.     color: '#08F',
  24.     yAxis: 'precipitation',
  25.     data: precipitationDatas,
  26.     tooltip: {
  27.         valueSuffix: 'mm'
  28.     }
  29. });
  31. //动态删除y轴。
  32. 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. Java NIO回炉

    重回东软了,据说可能要做一个跟文件相关的项目,于是决定把Java NIO的内容再捡起来,看看. 为什么要使用NIO,其实在低连接数的情况下,NIO的性能是要低于IO的:但是在高并发的情况下,确实NIO ...

  2. Js 中json简单处理

    Json2.js下载地址 json常用处理 Json字符串 var str = '{"code":10,"msg":"codemsg",&q ...

  3. cocos2dx 3.3创建新项目 和 VS2012解决方案加载失败问题

     首先创建新项目,步骤如下: 1.进入cocos2d-x-3.3\tools\cocos2d-console\bin目录,按住shift+鼠标右键 2.输入 cocos new 项目名 –p 包名 – ...

  4. C与OC、C++的区别

    C语言的特点:1)C语言是结构化语言,层次清晰,调试和维护比较容易2)表现能力和处理能力比较强,可直接访问内存的物理地址3)c语言实现对硬件的编辑,c语言课用语系统软件的开发,也可用语应用软件的开发, ...

  5. Firebird 同一字段的多行合并为一行

    Firebird 同一字段的多行合并为一行用LIST函数类似于MYSQL的GROUP_CONCAT. 具体用法如下: SELECT  LIST(a.GG_NAME||':'||a.GG_VALUE) ...

  6. 在mesos上安装storm,并且执行wordcount测试程序

    mesos上安装storm 1.基本说明 如果只用一句话来描述storm的话,可能会是这样:分布式实时计算系统.按照storm作者的说法,storm对于实时计算的意义类似于hadoop对于批处理的意义 ...

  7. 12个你未必知道的CSS小知识

    虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过. 1.CSS的color属性并非只能用于文本显示 对于CSS ...

  8. BZOJ 1624: [Usaco2008 Open] Clear And Present Danger 寻宝之路

    Description 农夫约翰正驾驶一条小艇在牛勒比海上航行． 海上有N(1≤N≤100)个岛屿,用1到N编号．约翰从1号小岛出发,最后到达N号小岛．一 张藏宝图上说,如果他的路程上经过的小岛依次出 ...

  9. UIKIT网页基本结构学习

    没办法,哈哈,以后一段时间,如果公司没有招到合适的运维研发, 啥啥都要我一个人先顶上了~~~:) 也好,可以让人成长. UIKIT,BOOTSTRAP之类的前端,搞一个是有好处的,我们以前即然是用了U ...

  10. PHP 判断从表单提交的值是否为空

    @$time = $_GET['time'];if(empty($time)) { echo "empty";} else { echo "not empty" ...