把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. 偷懒的inline-block解决方法

    最近这几天看了inline-block的用法,用它来代替浮动实现水平排列很不错,只是要解决一下浏览器兼容和间隙的问题.关于ie6,7的兼容问题 <inline-block 前世今生>(ht ...

  2. COB (Chip On Board) 製程介紹/簡介/注意事項 II

    銀膠 (Silver glue) 如果晶圓有接地或是散熱需求時,一般都會採用[銀膠],如果沒有的話則會採用[厭氧膠].[厭氧膠]顧名思義就是阻隔它與空氣接觸後就會自然固化,不需要高溫烘烤.使用銀膠則需 ...

  3. Ring3下干净的强行删除文件

    在某公司实习完,再次回到寝室.还是在学校好. 实习期间的给我的任务就是为项目添加一个强行删除的模块. 背景是硬盘上存储空间不够时,需要删掉老的文件,如果这时后,老的文件被打开了,没有关掉,就无法删除. ...

  4. NYOJ306 走迷宫(dfs+二分搜索)

    题目描写叙述 http://acm.nyist.net/JudgeOnline/problem.php?pid=306 Dr.Kong设计的机器人卡多非常爱玩.它经常偷偷跑出实验室,在某个游乐场玩之不 ...

  5. Swift初体验(三)

    /*******************************************************************************/ // 协议 protocol Des ...

  6. SurfaceView 和 View 区别

    android.view.View 和 android.view.SurfaceView SurfaceView 是从 View 基类中派生出来的显示类,直接子类有 GLSurfaceView和Vid ...

  7. ContentType 属性 MIME

    ".asf" = "video/x-ms-asf" ".avi" = "video/avi" ".doc&qu ...

  8. SQlSERVER生成唯一编号

    基数表-用来存储编号前缀和类型 建表如下 CREATE TABLE [dbo].[SerialNo]( [sCode] [varchar](50) NOT NULL, [sName] [varchar ...

  9. Objective-C的hook方案（一）: Method Swizzling

    Objective-C的hook方案(一):  Method Swizzling 转自:http://blog.csdn.net/yiyaaixuexi/article/details/9374411 ...

  10. Asp.Net MVC 控制器

    原文链接:http://www.asp.net/learn/mvc/ 这篇教程探索了ASP.NET MVC控制器(controller).控制器动作(controller action)和动作结果(a ...