本文实例讲述了jQuery插件高级图表绘制的2D堆柱状图效果。分享给大家供大家参考，具体如下：

1、高图表之2D堆柱状图源码

！2D堆柱状图/title脚本类型=' text/JavaScript ' src=' http : js/jquery-1。7 .2 .量滴js '/script脚本类型=' text/JavaScript ' src=' http : js/high charts。js '/script script type=' text/JavaScript ' $(function(){ $(' #堆积图表')).高图表({ chart: { type: 'column' }，title: { text: '堆柱状图}，xAxis: { categories: ['星期一', '星期二', '星期三', '星期四', '星期五','星期六','星期日] }，yAxis: { min: 0，title: { text: '水果销量}，stack labels 3360 { enabled : true，style : { font weight : ' bold '，color :(高级图表。主题排行榜。主题。textcolor)| | ' gray ' } } } })，legend: { align: ' right '，x: -70，verticalAlign: 'top '，y: 20，floating: true，背景色：(high} }，plot options : { column : { stagging 3: ' normal '，data labels 3: { enabled 33: true，color 33:(主题排行榜。主题。datalabelscolor)| | '白色'，样式： { textshadow : ' 0 0 0 0 3px黑色，0 0 3px黑色' } } } } }，系列：[{ name 3: '苹果，data: [58，31，49，12，35，65，98] }，{ name: '梨子，data: [12，45，63，24，17，87，35] }，{ name: '桃子，data: [67，89，47，27，58，67，34] }，{ name: '橘子，data: [54，36，78，64，35，78，94]}]})；});/script/head body div id=' stacked chart ' style=' width : 1200 px；高度： 550像素；边距： 0自动/div/body/html 2，运行结果

附：完整实例代码点击此处本站下载。

更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery常用插件及用法总结》 、 《jquery中Ajax用法总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jQuery扩展技巧总结》 、 《jQuery常见经典特效汇总》 及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。