把highcharts拿来做个简单的介绍，希望更多的朋友可以用到这个用来做图表的js插件。

preparation

Highcharts

Highcharts是一个制作图表的纯Javascript类库，主要特性如下：

  • 兼容性：兼容当今所有的浏览器，包括iPhone、IE和火狐等等；
  • 对个人用户完全免费；
  • 纯JS，无BS；
  • 支持大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼装图、散布图；
  • 跨语言：不管是PHP、Asp.net还是Java都可以使用，它只需要三个文件：一个是Highcharts的核心文件highcharts.js，还有a canvas emulator for IE和Jquery类库或者MooTools类库；
  • 提示功能：鼠标移动到图表的某一点上有提示信息；
  • 放大功能：选中图表部分放大，近距离观察图表；
  • 易用性：无需要特殊的开发技能，只需要设置一下选项就可以制作适合自己的图表；
  • 时间轴：可以精确到毫秒

下载插件

Highcharts下载地址

http://www.highcharts.com/download

jquery下载地址

http://jquery.com/

开发环境：

System：xp    JDK:1.5  Tomcat：5.X  Myeclipse：6.5

jquery：jquery-1.6.3.min.js

highcharts：Highcharts-2.1.9

项目环境：

注：红色的地方即为本次介绍需要的文件部分。

start

代码如下：

本次介绍是把highcharts中的第一个文件拷贝过来，然后把其他的功能加在了这个文件中，然后查询相关资料，解决了链接以及打印导出等。

001 <!DOCTYPE HTML>
002 <html>
003      <head>
004          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
005          <title>Highcharts Example---基本的曲线图</title>
006  
007          <!-- 1.引入jquery库 -->
008          <script type="text/javascript" src="js/jquery-1.6.3.min.js"></script>
009          <!-- 2.引入highcharts的核心文件 -->
010          <script type="text/javascript" src="js/highcharts.js"></script>
011          <!-- 3.引入导出需要的js库文件 -->
012          <script type="text/javascript" src="js/exporting.js"></script>
013  
014          <!--4.js脚本-->
015          <script type="text/javascript">
016         
017 var chart;
018              $(document).ready(function() {
019                  chart = new Highcharts.Chart({
020                      chart: {
021                          renderTo: 'container',
022                          defaultSeriesType: 'line',//图表类别，可取值有：line、spline、area、areaspline、bar、column等
023                          marginRight: 130,
024                          marginBottom: 25
025                      },
026                      title: {
027                          text: '襄阳(一级标题)',//设置一级标题
028                          x: -20 //center
029                      },
030                      subtitle: {
031                          text: '2011温度各区对比(二级标题)',//设置二级标题
032                          x: -20
033                      },
034                      xAxis: {
035                          categories: ['2011/1', '2011/2', '2011/3', '2011/4', '2011/5', '2011/6',
036 '2011/7', '2011/8', '2011/9', '2011/10', '2011/11', '2011/12']//设置x轴的标题
037                      },
038                      yAxis: {
039                          title: {
040                              text: '温度 (°C)'//设置y轴的标题
041                          },
042                          plotLines: [{
043                              value: 0,
044                              width: 1,
045                              color: '#808080'
046                          }]
047                      },
048                      tooltip: {
049                          formatter: function() {
050 return '<b>'+ this.series.name +'</b><br/>'+
051 this.x +': '+ this.y +'°C';//鼠标放在数据点的显示信息，但是当设置显示了每个节点的数据项的值时就不会再有这个显示信息
052                          }
053                      },
054                      legend: {
055                          layout: 'vertical',
056                          align: 'left',//设置说明文字的文字 left/right/top/
057                          verticalAlign: 'top',
058                          x: -10,
059                          y: 100,
060                          borderWidth: 0
061                      },
062                      exporting:{
063                           enabled:true //用来设置是否显示‘打印’,'导出'等功能按钮，不设置时默认为显示
064                      },
065                      plotOptions: {
066                          line: {
067                              dataLabels: {
068                                  enabled: true //显示每条曲线每个节点的数据项的值
069                              },
070                              enableMouseTracking: false
071                          }
072                      },
073                      series: [{
074                          name: '襄城',//每条线的名称
075                          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]//每条线的数据
076                      }, {
077                          name: '樊城',
078                          marker:{
079                              symbol:"square"
080                          },
081                          data: [{
082                                 y:-3,
083                                 marker:{
084                                 symbol:'url(sun.png)'//在线上的某个点显示图标
085                                 }
086                          }, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
087                      }, {
088                          name: '襄州',
089                          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]
090                      }, {
091                          name: '东津',
092                          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]
093                      },{
094                          name: '鱼梁州',
095                          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]
096                      }]
097                  });
098                 
099                 
100              });
101                 
102 </script>
103      </head>
104      <body>
105          <!--5.导入容器用于显示图表-->
106          <div id="container"
107              style="width: 800px; height: 400px; margin: 0 auto"></div>
108      </body>
109 </html>

result

访问的url如下：http://localhost:8080/JFreeChart/highcharts/highcharts1.html

以下做几点说明：

（1）去掉或更改图片右下角的链接

在highcharts.js文件中搜索credits字符串，找到如下的字符串，

enabled:设置是否显示链接

text：设置链接显示的名称

href：设置链接的url

（2）去掉图片右上角的打印及导出按钮

在js中设置以下代码：

exporting:{                       enabled:true //用来设置是否显示‘打印’,'导出'等功能按钮，不设置时默认为显示                  },

（3）点击图片左边的以下文字，当一次单击会隐藏某一条曲线，再次单击会显示该条曲线

转自：   http://www.cnblogs.com/java-pan/archive/2011/12/31/highcharts.html

JS图表组件 highcharts 简单的介绍的更多相关文章

  1. 转：ECharts图表组件之简单关系图：如何轻松实现另类站点地图且扩展节点属性实现点击节点页面跳转

    站点地图不外乎就是罗列一个网站的层次结构,提炼地讲就是一个关系结构图.那么我们如何巧用ECharts图表组件内的简单关系结构图来实现一个站点的地图结构呢?另外如何点击某个节点的时候实现页面跳转呢? 针 ...

  2. JS图表工具 ---- Highcharts

    Highcharts 是一个用纯 JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是 web 应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站和非商业用途使用. Hi ...

  3. Atitit.js图表控件总结

    Atitit.js图表控件总结 1. 为什么要使用图表1 2. 图表分类1 3. 数据可视化的优点1 4. 流行的js图表类库1 5. 参考2 1. 为什么要使用图表 因为要可视化 2. 图表分类 条 ...

  4. JS组件系列——开源免费图表组件：Chart.js

    前言:最近被开源免费得有点上火了,各种组件首先想到的就是是开源否.是否免费.是否和bootstrap风格一致.想着以后做报表肯定要用到图表组件的,于是在Bootstrap中文网上面找到了Chart.j ...

  5. vue-schart ： vue.js 的图表组件

    介绍 vue-schart 是使用vue.js封装了sChart.js图表库的一个小组件.支持vue.js 1.x & 2.x 仓库地址:https://github.com/lin-xin/ ...

  6. Highcharts图表插件的简单使用说明

    Highcharts图表控件是眼下使用最为广泛的图表控件.本文将从零開始逐步为你介绍Highcharts图表控件. 通过本文.你将学会怎样配置Highcharts以及动态生成Highchart图表. ...

  7. 关于Highcharts图表组件动态修改属性的方法（API）总结之Series

    Highcharts图表组件内的Series很重要,如果说Categries是其大脑,那么Series就是其心脏.这两者才是Highcharts图表组件的重中之重啊.接下来就为大家介绍关于设置Seri ...

  8. highcharts 图表库的简单使用

    Highcharts简介: Highcharts是一款纯javascript编写的图表库,能够很简单便捷的在Web网站或Web应用中添加交互性的图表,Highcharts目前支持直线图.曲线图.面积图 ...

  9. highcharts图表组件入门教程：如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度

    highcharts图表组件入门教程:如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度 作者:highcharts | 时间:2014-6-11 14:07:05 | [小  大] | ...

随机推荐

  1. 转: ES6异步编程: co函数库的含义与用法

    转: ES6异步编程: co函数库的含义与用法 co 函数库是著名程序员 TJ Holowaychuk 于2013年6月发布的一个小工具,用于 Generator 函数的自动执行. 比如,有一个 Ge ...

  2. IZ65534: 'JAVA.LANG.CLASSFORMATERROR' ERROR FOR A VALID IDENTIFIER

    PAR status Closed as program error. Error description Error Message: The java class could not be loa ...

  3. 【Windows 8 Store App】学习：目录

    原文http://www.cnblogs.com/java-koma/archive/2013/05/22/3093302.html 写在前面:我之前从事java开发,对MS的一整套东西还没入门哈,难 ...

  4. [原]基于CAS实现单点登录（SSO）：登录成功后，cas client如何返回更多用户信息

    从cas server登录成功后,默认只能从casclient得到用户名.但程序中也可能遇到需要得到更多如姓名,手机号,email等更多用户信息的情况. cas client拿到用户名后再到数据库中查 ...

  5. XML限制、初步WEB服务

    DTD <!DOCTYPE 根元素 [ <!ELEMENT 元素 (a,b,c)>//必须按照根元素包含abc顺序排列 <!ATTLIST 属性 > ]> 引用方式 ...

  6. 像web一样使用python

    使用传统的web开发技术,也就是html+js,然后搭配一个后端语言,已经成为当今web开发的固定模式了,为此也形成了众多的toolkit,譬如ror,django,各种js图形库更是玲琅满目,从非常 ...

  7. 关于c语言中负数位移位操作的漫谈

    近期有个朋友在程序中使用了对16进制数做负数移位(编译器是gcc),本人最次产生好奇.所以研究了一些. 对一个数做负数位移位的操作是不规范的,可是是可行的. 详细样例: char tmp = 0x10 ...

  8. 读写分离提高 SQL Server 并发性

    转自:http://www.canway.net/Lists/CanwayOriginalArticels/DispForm.aspx?ID=476 在一些大型的网站或者应用中,单台的SQL Serv ...

  9. npoi 使用方法

    不少朋友在做项目的过程中或多或少的都会用到excel导入.导出功能,下面我来给大家介绍一下使用NPOI如何导入.导出excel, 通过代码描述一下npoi的使用方法,希望都够给需要的朋友一点点帮助,也 ...

  10. ASP.NET MVC View向Controller传值方式总结

    1:QueryString传值1)也可以使用new{}来为form的action增加querystring2)在controler里使用Request.QueryString["word&q ...