JS图表组件 highcharts 简单的介绍-CSDN博客

把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>