JQuery圖表插件Highcharts示例教程，先上圖，大伙Show一下效果：先上三個圖，分別是曲線、柱狀、扇形。

圖表中的數(shù)據(jù)純屬于DEMO的測試數(shù)據(jù)，沒有實際用意。下面講下大致的實現(xiàn)步驟

第一步，下載并且引用JS包（highcharts.js），theme顧名思義是放皮膚的。可以下載DEMO逐一試試就知道效果怎么樣了，上圖就應(yīng)用了兩個樣式。download中放的是打印和導(dǎo)出成圖片的js文件（貌似是通過js上傳到官網(wǎng)，然后再下載到本地），因為項目是放到內(nèi)網(wǎng)的所以就沒有用了。

第二步，實現(xiàn)，貼代碼。

var chart;$(document).ready(function() {chart = new Highcharts.Chart({chart: {renderTo: 'container', //放置圖表的容器plotBackgroundColor: null,plotBorderWidth: null,defaultSeriesType: 'line' },title: {text: 'JQuery曲線圖演示'},subtitle: {text: '副標(biāo)題'},xAxis: {//X軸數(shù)據(jù)categories: ['一月份', '二月份', '三月份', '四月份', '五月份', '六月份', '七月份', '八月份', '九月份', '十月份', '十一月份', '十二月份'],labels: {rotation: -45, //字體傾斜align: 'right',style: { font: 'normal 13px 宋體' }}},yAxis: {//Y軸顯示文字title: {text: '產(chǎn)量/百萬'}},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: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]}, {name: '江西',data: [4.0, 2.9, 5.5, 24.5, 18.4, 11.5, 35.2, 36.5, 23.3, 38.3, 23.9, 3.6]}, {name: '北京',data: [14.0, 12.9, 15.5, 14.5, 28.4, 21.5, 15.2, 16.5, 13.3, 28.3, 13.9, 13.6]}, {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] }]});});

這寫都是配置，最重要的就是series里面的數(shù)據(jù)了，如果需要從數(shù)據(jù)庫中取出來的話，直接生成json然后賦值上去就OK了，效果很炫，還有動態(tài)感，感興趣的朋友可以下載下來跑跑。

?

點擊下載

轉(zhuǎn)載于:https://www.cnblogs.com/smallsong/archive/2012/01/20/2327738.html

總結(jié)

以上是生活随笔為你收集整理的JQuery图表插件Highcharts示例教程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。