之前使用到highcharts插件及chosen插件，使用方法很簡單。
highcharts 圖表生成JS.參考url:http://www.highcharts.com/
chosen 下拉框美化JS.參考url:http://davidwalsh.name/demo/jquery-chosen.php
在使用的時候，将方法抽取出來加了些簡單的備注。更詳細的參考所根的URL
<html>
<head>
<title>highcharts報表示例</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
/**
* highcharts資料圖表
*
* @param {object} chart 圖表的相關參數配置
* @param {object} credits 圖表版權資訊參數配置
* @param {object} lang 圖表語言參數配置
* @param {object} exporting 導出配置
* @param {object} title 标題配置
* @param {object} xAxis X軸配置
* @param {object} yAxis Y軸配置
* @param {object} plotOptions 各類型圖表繪制配置
* @param {object} labels 資料圖表标簽配置
* @param {array} series 資料源配置
*/
chart = new Highcharts.Chart({
/**
* 圖表配置
*
* @param {string} renderTo 圖表加載的位置
* @param {int} width 圖表的寬度
* @param {int} hight 圖表的高度
* @param {string} type 圖表的預設類型
* @param {string} zoomType 圖表的縮放選項，有：x, y, xy
* @param {string} backgroundColor 圖表的背景，有：x, y, xy
* @param {string} plotBackgroundColor圖表核心心的背景，有：x, y, xy
*/
chart: {
// 圖表加載的位置
renderTo: 'container',
// 圖表寬度
width: 600,
// 圖表高度
hight: 500,
// 預設圖表類型
type: 'line',
// 縮放配置：x，y，xy
zoomType: ''
},
/**
* 版權資訊配置，不用修改直接複制
*
* @param {boolean} enabled 是否顯示版權資訊
* @param {string} href 版權資訊所連結到的位址
* @param {string} text 版權資訊所顯示的文字内容
*/
credits:{
enabled: false,
href: "http://www.msnui.tk/Admin",
text: '微源網絡科技'
},
/**
* 語言配置，不用修改直接複制
*
* @param {string} exportButtonTitle 導出按鈕的标題文字
* @param {string} printButtonTitle 列印按鈕的标題文字
*/
lang:{
exportButtonTitle:'導出PDF',
printButtonTitle:'列印報表'
},
/**
* 導出配置，不用修改直接複制
*
* @param {boolean} enabled 是否允許導出
* @param {object} buttons 關于與導出和列印按鈕相關的配置對象
* @param {string} filename 導出檔案的檔案名
* @param {string} type 預設導出檔案的格式
*/
exporting:{
// 是否允許導出
enabled:true,
// 按鈕配置
buttons:{
// 導出按鈕配置
exportButton:{
menuItems: null,
onclick: function() {
this.exportChart();
}
},
// 列印按鈕配置
printButton:{
enabled:false
}
},
// 檔案名
filename: '報表',
// 導出檔案預設類型
type:'application/pdf'
},
/**
* 圖表的标題
*
* @param {string} text 圖表的标題，如果不需要顯示标題，直接設定為空字元串就行
*/
title: {
text: '聯合圖表執行個體'
},
/**
* X軸配置
*
* @param {array} categories X軸坐标分類值
* @param {object} labels 坐标标簽配置對象
* @param {int} tickInterval 坐标軸的步進值
* @param {object} title 坐标軸标題
*/
xAxis: {
// X軸分類
categories: ['蘋果', '桔子', '梨子', '香蕉', '李子'],
// 坐标軸的标簽
labels:{
// 标簽位置
align: 'center',
// 标簽格式化
formatter: function(){
return this.value;
},
// 标簽旋轉度數
rotation: 20,
// 标簽交錯顯示的行數
staggerLines: 1
},
// X軸的步進值，決定隔多少個顯示一個
tickInterval: 1,
// 坐标軸标題
title: {
text: '水果分類'
}
},
/**
* y軸配置
*
* @param {object} labels 坐标标簽配置對象
* @param {int} tickInterval 坐标軸的步進值
* @param {object} title 坐标軸标題
*/
yAxis: {
// 坐标軸的标簽
labels:{
// 标簽位置
align: 'right',
// 标簽格式化
formatter: function(){
return this.value + '個';
}
},
// y軸的步進值，決定隔多少個顯示一個
tickInterval: 3,
// 坐标軸标題
title: {
text: '水果個數'
}
},
/**
* 繪圖的各選項、參數配置
* @param {object} series 數列，可以配置各種不同類型圖表的預設參數
* @param {object} bar 橫向柱狀圖配置參數
* @param {object} column 縱向柱狀圖配置參數
* @param {object} line 線性圖
* @param {object} spline 圓滑曲線圖配置參數
* @param {object} pie 餅狀圖
*/
plotOptions:{
/**
* 數列，對于所有的圖表都可以适用的配置參數，屬于共用性質。
*/
series: {
// 滑鼠樣式
cursor: 'pointer',
events:{
// 資料标注不可點選
legendItemClick: false
},
// 當是柱狀圖時，柱狀的寬度
pointWidth: 15
},
/**
* 橫向柱狀圖
*/
bar:{
// 資料點的點選事件
events:{
click: function(event){
//alert('The bar was clicked, and you can add any other functions.');
}
},
// 當值為0時，在圖表中柱狀體的長度設定
minPointLength: 2,
// 當具體的資料點被點選時的事件響應函數。如果不需要事件響應，可以删除。
point:{
events:{
click: function(){
//alert('This point was clicked. You can and any other functions.');
}
}
},
// 是否在圖注中顯示。
showInLegend: true,
// 是否堆疊，預設：null，數值：normal，百分比：percent
//stacking: 'normal',
// 調整圖像順序關系
zIndex: 1
},
/**
* 縱向柱狀圖
*/
column:{
// 資料點的點選事件
events:{
click: function(event){
//alert('The bar was clicked, and you can add any other functions.');
}
},
// 當值為0時，在圖表中柱狀體的長度設定
minPointLength: 2,
// 當具體的資料點被點選時的事件響應函數。如果不需要事件響應，可以删除。
point:{
events:{
click: function(){
//alert('This point was clicked. You can and any other functions.');
}
}
},
// 是否在圖注中顯示。
showInLegend: true,
// 是否堆疊，預設：null，數值：normal，百分比：percent
//stacking: null,
// 調整圖像順序關系
zIndex: 2
},
/**
* 線性圖，與spline的差別在于點與點之間的連線是直線還是圓滑曲線。
*/
line:{
// 允許線性圖上的資料點進行點選
allowPointSelect: true,
// 資料點的點選事件
events:{
click: function(event){
//alert('The bar was clicked, and you can add any other functions.');
}
},
// 當具體的資料點被點選時的事件響應函數。如果不需要事件響應，可以删除。
point:{
events:{
click: function(){
//alert('This point on the line was clicked. You can and any other functions.');
}
}
},
// 是否在圖注中顯示。
showInLegend: true,
// 調整圖像順序關系
zIndex: 3
},
/**
* 曲線圖，與spline的差別在于點與點之間的連線是直線還是圓滑曲線。
*/
spline:{
// 允許線性圖上的資料點進行點選
allowPointSelect: true,
// 資料點的點選事件
events:{
click: function(event){
//alert('The bar was clicked, and you can add any other functions.');
}
},
// 當具體的資料點被點選時的事件響應函數。如果不需要事件響應，可以删除。
point:{
events:{
click: function(){
//alert('This point on the line was clicked. You can and any other functions.');
}
}
},
// 是否在圖注中顯示。
showInLegend: true,
// 調整圖像順序關系
zIndex: 3
},
/**
* 餅狀圖
*/
pie:{
// 是否允許扇區點選
allowPointSelect: true,
// 點選後，滑開的距離
slicedOffset: 5,
// 餅圖的中心坐标
center: [100, 80],
// 餅圖的大小
size: 100,
// 資料标簽
dataLabels: {
// 是否允許标簽
enabled: true,
// 标簽與圖像元素之間的間距
distance: 10
},
// 資料點的點選事件
events:{
click: function(event){
//alert('The bar was clicked, and you can add any other functions.');
}
},
// 是否忽略隐藏的項
ignoreHiddenPoint: true,
// 當具體的資料點被點選時的事件響應函數。如果不需要事件響應，可以删除。
point:{
events:{
click: function(){
//alert('This point on the line was clicked. You can and any other functions.');
}
}
},
// 是否在圖注中顯示。
showInLegend: false,
// 調整圖像順序關系
zIndex: 0
}
},
/**
* 資料圖表标簽配置
*
* @param {array} items 項目配置
*/
labels: {
items: [{
html: '水果總消耗量',
style: {
left: '65px',
top: '8px',
color: 'black'
}
}]
},
/**
* 資料源配置，本身是一個對象數組
*
* @param {string} type 圖表的類型
* @param {string} name 資料序列的名稱
* @param {array} data 資料序列，是一個對象數組
*/
series: [{
type: 'column',
name: 'Jane',
data: [3, 2, 1, 3, 4]
}, {
type: 'column',
name: 'John',
data: [2, 3, 5, 7, 6]
}, {
type: 'column',
name: 'Joe',
data: [4, 3, 3, 9, 0]
}, {
type: 'spline',
name: '平均',
data: [3, 2.67, 3, 6.33, 3.33]
}, {
type: 'pie',
name: '水果總消耗量',
data: [{
name: 'Jane',
y: 13,
color: '#4572A7' // Jane's color
}, {
name: 'John',
y: 23,
color: '#AA4643' // John's color
}, {
name: 'Joe',
y: 19,
color: '#89A54E' // Joe's color
}]
}]
});
});
});
</script>
</head>
<body>
<script src="./js/highcharts/highcharts.js"></script>
<script src="./js/highcharts/modules/exporting.js"></script>
<div id="container"></div>
</body>
</html>
---------------------------------------------------------------------------------
2. highstock執行個體代碼，其中導出功能配置了本地化，用的是exporting中的導出接口。
<html>
<head>
<title>highstock報表示例</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<!-- 源資料 -->
<script type="text/javascript" src="./js/usdeur.js"></script>
<script type="text/javascript">
//圖表
$(function() {
/**
* highstock資料圖表
*
* @param {object} chart 圖表的相關參數配置
* @param {object} credits 圖表版權資訊參數配置
* @param {object} lang 圖表語言參數配置
* @param {object} exporting 導出配置
* @param {object} title 标題配置
* @param {object} xAxis X軸配置
* @param {array} series 資料源配置
*/
var chart1 = new Highcharts.StockChart({
/**
* 圖表配置
*
* @param {string} renderTo 圖表加載的位置
* @param {int} width 圖表的寬度
* @param {int} hight 圖表的高度
*/
chart: {
renderTo: 'container',
// 圖表寬度
width: 700,
// 圖表高度
hight: 500
},
/**
* 版權資訊配置，不用修改直接複制
*
* @param {boolean} enabled 是否顯示版權資訊
* @param {string} href 版權資訊所連結到的位址
* @param {string} text 版權資訊所顯示的文字内容
*/
credits:{
enabled: false,
href: "http://www.msnui.tk/Admin",
text: '微源網絡科技'
},
/**
* 語言配置，不用修改直接複制
*
* @param {array} months 配置月份語言
* @param {array} shortMonths 配置短月份
* @param {array} weekdays 配置星期
* @param {string} exportButtonTitle 導出按鈕的标題文字
* @param {string} printButtonTitle 列印按鈕的标題文字
*/
lang:{
months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
shortMonths: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一', '十二'],
weekdays: ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
exportButtonTitle:'導出PDF',
printButtonTitle:'列印報表'
},
/**
* 導出配置，不用修改直接複制
*
* @param {boolean} enabled 是否允許導出
* @param {object} buttons 關于與導出和列印按鈕相關的配置對象
* @param {string} filename 導出檔案的檔案名
* @param {string} type 預設導出檔案的格式
*/
exporting:{
// 是否允許導出
enabled:true,
// 按鈕配置
buttons:{
// 導出按鈕配置
exportButton:{
menuItems: null,
onclick: function() {
this.exportChart();
}
},
// 列印按鈕配置
printButton:{
enabled:false
}
},
// 檔案名
filename: '報表',
// 配置導出接口
url: 'http://' + location.hostname + '/test/Highcharts-2.3.2/example/exporting/index.php',
// 導出檔案預設類型
type:'application/pdf'
},
/**
* 圖表的标題
*
* @param {string} text 圖表的标題，如果不需要顯示标題，直接設定為空字元串就行
*/
title: {
text: '圖表執行個體标題'
},
/**
* 域選擇配置
*
* @param {array} buttons 縮放選擇按鈕
* @param {int} selected 預設選擇縮放按鈕中的第幾個
* @param {boolean} inputEnabled 是否允許input标簽選框
*/
rangeSelector: {
// 縮放選擇按鈕，是一個數組。
// 其中type可以是： 'millisecond', 'second', 'minute', 'day', 'week', 'month', 'ytd' (year to date), 'year' 和 'all'。
// 其中count是指多少個機關type。
// 其中text是配置顯示在按鈕上的文字
buttons: [{
type: 'month',
count: 1,
text: '1月'
}, {
type: 'month',
count: 3,
text: '3月'
}, {
type: 'month',
count: 6,
text: '6月'
}, {
type: 'year',
count: 1,
text: '1年'
},{
type: 'year',
count: 3,
text: '3年'
}, {
type: 'all',
text: '所有'
}],
// 預設選擇域：0（縮放按鈕中的第一個）、1（縮放按鈕中的第二個）……
selected: 1,
// 是否允許input标簽選框
inputEnabled: false
},
/**
* 氣泡示說明标簽
*
* @param {string} xDateFormat 日期時間格式化
*/
tooltip:{
// 日期時間格式化
xDateFormat: '%Y-%m-%d %A'
},
/**
* X軸坐标配置
*
* @param {object} dateTimeLabelFormats x軸日期時間格式化，不用修改直接使用
*/
xAxis:{
// 如果X軸刻度是日期或時間，該配置是格式化日期及時間顯示格式
dateTimeLabelFormats: {
second: '%Y-%m-%d<br/>%H:%M:%S',
minute: '%Y-%m-%d<br/>%H:%M',
hour: '%Y-%m-%d<br/>%H:%M',
day: '%Y<br/>%m-%d',
week: '%Y<br/>%m-%d',
month: '%Y-%m',
year: '%Y'
}
},
/**
* 資料源配置，本身是一個對象數組
*
* @param {string} name 資料序列的名稱
* @param {array} data 資料序列，是一個對象數組。data的結構：[[時間戳, 值], [時間戳, 值], [時間戳, 值], ……]
*/
series: [{
name: '資料名稱',
data: usdeur
}]
});
});
</script>
</head>
<body>
<script src="./js/highstock/highstock.js"></script>
<script src="./js/highstock/modules/exporting.js"></script>
<div id="container"></div>
</body>
</html> ![使用HIGHCHARTS繪制服務端傳回資料曲線圖[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)