java js highcharts_JS图表组件 highcharts 简单的介绍

把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下载地址

jquery下载地址

开发环境：

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

002

003

004

005

Highcharts Example---基本的曲线图

006

007

008

009

010

011

012

013

014

015

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 ''+ this.series.name +'
'+

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

103

104

105

106

107

style="width: 800px; height: 400px; margin: 0 auto">

108

109

result

以下做几点说明：

(1)去掉或更改图片右下角的链接

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

enabled:设置是否显示链接

text：设置链接显示的名称

href：设置链接的url

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

在js中设置以下代码：

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

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