把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. 如果有三个Bool型变量，请写出一程序得知其中有2个以上变量的值是true

    下面这篇文章是从StackOverflow来的.LZ面试的时候遇到了一道面试题:“如果有三个Bool型变量,请写出一程序得知其中有2个以上变量的值是true”,于是LZ做了下面的这样的程序: bool ...

  2. Unix/Linux环境C编程入门教程(7) OPENBSDCCPP开发环境搭建

    1. 年发起了OpenBSD 专案,希望创造一个注重安全的操作系统. 2.创建一个虚拟机. 3.选择默认的workstation10.0 4.我们选择稍后安装操作系统. 5.我们选择FreeBSD64 ...

  3. cygwin在Windows8.1中设置ssh的问题解决

    为了在Windows 8.1上直接使用Linux环境和hadoop开发,装了cygwin,同时设置ssh无密码登录.   但正常ssh-keygen后复制到authorised_keys后登录出现提示 ...

  4. IE6兼容性问题及IE6常见bug详细汇总－－－转载

    1.IE6怪异解析之padding与border算入宽高 原因:未加文档声明造成非盒模型解析 解决方法:加入文档声明<!doctype html> 2.IE6在块元素.左右浮动.设定mar ...

  5. C++一维数组和指针的关系总结

    对于数组int a[10]; a表示数组的第一个元素的地址,即&a[0]; 如果使指针p,指向数组的首元素,可以进行操作: int * p=a; 或者 int *p=&a[0]; 那么 ...

  6. SQL SERVER2012新分页方式 轉載

    SQL SERVER2012在ORDER BY 子句中加入了新元素offset,允许用户在排序完成的结果集中自定义输出行范围,大大简化了分页SQL的书写方式和效率. SQL SERVER2012在OR ...

  7. vs 2005 在IE下断点不起作用

    vs2005 加断点调试,ie下不起作用. 1. 点击[开始]->[运行] 命令:regedit. 2. 定位到HKEY_LOCALMACHINE -> SOFTWARE -> Mi ...

  8. SQL Server数据库连接字符串整理

    1.sql验证方式的 Data Source=数据源;Initial Catalog= 数据库名;UserId=sql登录账号;Password=密码; Eg: Data Source=.;Initi ...

  9. Jquery 获取IP地址

    //获取ip和地址 $(function () { var url = 'http://chaxun.1616.net/s.php?type=ip&output=json&callba ...

  10. php phalcon

    1. 准备所需工具 1) php环境 浏览 2) phalcon插件 浏览 2. 安装phalcon 将php_phalcon.dll拷贝到%PHP_HOME%\ext目录中 修改php.ini文件, ...