JQuery圖表插件——Highcharts
因為項目中需要用到圖表生成,所有Google了下,找到了這個插件,順帶寫了個DEMO。點擊跳轉官網先上三個圖,分別是曲線、柱狀、扇形。
圖表中的數據純屬於DEMO的測試數據,沒有實際用意。下面講下大致的實現步驟
第一步,下載並且引用JS包(highcharts.js),theme顧名思義是放模板的。
可以下載DEMO逐一試試就知道效果怎麼樣了,上圖就應用了兩個樣式。download中放的是打印和導出成圖片的js文件(貌似是通過js上傳到官網,然後再下載到本地),因為項目是放到內網的所以就沒有用了。
第二步,實現,貼代碼。
var chart;
$(document).ready( function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container', // 放置圖表的容器
plotBackgroundColor: null ,
plotBorderWidth: null ,
defaultSeriesType: 'line'
},
title: {
text: 'JQuery曲線圖演示'
},
subtitle: {
text: '副標題'
},
xAxis: { // X軸數據
categories: ['一月份', '二月份', '三月份', '四月份', '五月份', '六月份', '七月份', '八月份', '九月份', '十月份', '十一月份', '十二月份' ],
labels: {
rotation: -45, // 字體傾斜
align: 'right' ,
style: { font: 'normal 13px宋體' }
}
},
yAxis: { // Y軸顯示文字
title: {
text: '產量/百萬'
}
},
tooltip: {
enabled: true ,
formatter: function () {
return '<b>' + this .x + '</b><br/>' + this .series.name + ': ' + Highcharts.numberFormat( this .y, 1 );
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: true // 是否顯示title
}
},
series: [{
name: '杭州' ,
data:
}, {
name: '江西' ,
data:
}, {
name: '北京' ,
data:
} , {
name: '湖南' ,
data:
}]
});
});
這寫都是配置,最重要的就是series裡面的數據了,如果需要從數據庫中取出來的話,直接生成json然後賦值上去就OK了,效果很炫,還有動態感,感興趣的朋友可以下載下來跑跑。
注意,DEMO裡的download文件夾中的js文件,本來導出及打印的一些提示是英文,我已經修改成中文了,在引用js文件的時候需要charset="gb2312",具體DEMO中我已經寫好了註釋。好的,到此為止。下載地址
頁:
[1]