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下載地址
http://www.highcharts.com/download
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中的第一個文件拷貝過來，然后把其他的功能加在了這個文件中，然后查詢相關資料，解決了鏈接以及打印導出等。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example---基本的曲線圖</title>
<!-- 1.引入jquery庫 -->
<script type="text/javascript" src="js/jquery-1.6.3.min.js"></script>
<!-- 2.引入highcharts的核心文件 -->
<script type="text/javascript" src="js/highcharts.js"></script>
<!-- 3.引入導出需要的js庫文件 -->
<script type="text/javascript" src="js/exporting.js"></script>
<!--4.js腳本-->
<script type="text/javascript">
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'line',//圖表類別，可取值有：line、spline、area、areaspline、bar、column等
marginRight: 130,
marginBottom: 25
},
title: {
text: '襄陽(一級標題)',//設置一級標題
x: -20 //center
},
subtitle: {
text: '2011溫度各區對比(二級標題)',//設置二級標題
x: -20
},
xAxis: {
categories: ['2011/1', '2011/2', '2011/3', '2011/4', '2011/5', '2011/6',
'2011/7', '2011/8', '2011/9', '2011/10', '2011/11', '2011/12']//設置x軸的標題
},
yAxis: {
title: {
text: '溫度 (°C)'//設置y軸的標題
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y +'°C';//鼠標放在數據點的顯示信息，但是當設置顯示了每個節點的數據項的值時就不會再有這個顯示信息
}
},
legend: {
layout: 'vertical',
align: 'left',//設置說明文字的文字 left/right/top/
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
exporting:{
enabled:true //用來設置是否顯示‘打印’,'導出'等功能按鈕，不設置時默認為顯示
},
plotOptions: {
line: {
dataLabels: {
enabled: true //顯示每條曲線每個節點的數據項的值
},
enableMouseTracking: false
}
},
series: [{
name: '襄城',//每條線的名稱
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]//每條線的數據
}, {
name: '樊城',
marker:{
symbol:"square"
},
data: [{
y:-3,
marker:{
symbol:'url(sun.png)'//在線上的某個點顯示圖標
}
}, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: '襄州',
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]
}, {
name: '東津',
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]
},{
name: '魚梁州',
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]
}]
});
});
</script>
</head>
<body>
<!--5.導入容器用于顯示圖表-->
<div id="container"
style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html></pre>
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