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

圖表中的數據純屬于DEMO的測試數據，沒有實際用意。下面講下大致的實現步驟

第一步，下載并且引用JS包(highcharts.js)，theme顧名思義是放皮膚的?？梢韵螺dDEMO逐一試試就知道效果怎么樣了，上圖就應用了兩個樣式。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 '' + this.x + '
' + 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里面的數據了，如果需要從數據庫中取出來的話，直接生成json然后賦值上去就OK了，效果很炫，還有動態感，感興趣的朋友可以下載下來跑跑。

總結

以上是生活随笔為你收集整理的jquery饼状图插件的指引线_JQuery图表插件Highcharts示例教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。