把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. 两个DIV，左DIV宽度固定，右DIV自动填满剩余空间

    <style type="text/css"> #main{ width:98%; } #sidebar{ float:left; width:200px; backg ...

  2. VPN的分类方式

    VPN的分类方式    VPN的分类方式比较混乱.不同的生产厂家在销售它们的VPN产品时使用了不同的分类方式,它们主要是产品的角度来划分的.不同的ISP在开展VPN业务时也推出了不同的分类方式,他们主 ...

  3. LCIS（线段树区间合并）

    LCIS Time Limit: 6000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...

  4. 比较两个data日期之间的天数相差

    先将字符串转化为Date类型 转化方式参看:http://blog.csdn.net/caoyinghui1986/archive/2008/04/18/2303570.aspx 然后在调用Date. ...

  5. .net网站开发（前端）：4.MVC HtmlHelper

    通过前面三节,已经大概理解MVC是怎样运作的了.MVC的一个特点就是可以很方便地控制视图效果,数据交互也很灵活.先讲一下视图控制的,HtmlHelper,看到Help就知道它是不知疲惫的好人啦(有点像 ...

  6. ZOJ 3794 Greedy Driver spfa

    题意: 给定n个点,m条有向边,邮箱容量. 起点在1,终点在n,開始邮箱满油. 以下m行表示起点终点和这条边的耗油量(就是长度) 再以下给出一个数字m表示有P个加油站,能够免费加满油. 以下一行P个数 ...

  7. JavaScript 开发经验整理

    前言 今年接触了一个B/S的项目,总结了一些JavaScript开发经验,整理些有用的内容与大家分享. 本文会持续更新... 1.实现代码访问的控制 随着项目JavaScript代码库扩大,本应被控制 ...

  8. ToolStripMenuItem控件实现DatagridView行的上下移

    /*--------------行上移------------------*/ 1 private void 上移ToolStripMenuItem_Click(object sender, Even ...

  9. JavaScript之向文档中添加元素和内容的方法

    一.非DOM方法添加 1.document.write() <html xmlns="http://www.w3.org/1999/xhtml"> <head&g ...

  10. ZeroClipBoard 复制粘贴插件

    ZeroClipboard 1.    引用js 1 <script type="text/javascript" src="/ZeroClipboard.js&q ...