jQuery插件高级图表实现的2D条状图效果示例【附演示源码下载】

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

1、实例代码：

！2D条状图/title脚本类型=' text/JavaScript ' src=' http : js/jquery-1。7 .2 .量滴js '/script脚本类型=' text/JavaScript ' src=' http : js/high charts。js '/script脚本类型=' text/JavaScript ' $(function(){ $(' # barChart ')).高级图表({ chart: { type: 'bar' }，title: { text: '2014年某一周水果销售量},副标题： { text: '' }，xaxis 3360 { categories :['星期一', '星期二', '星期三', '星期四， '星期五','星期六','星期日]，title: { text: '星期} }，yAxis: { min: 0，title: { text: '数量，align: 'high' }，标签: {溢出： ' align ' }，工具提示： { valuesuffix : ' kg ' }，绘图选项3360 { bar : { data labels : { enabled : true } }，图例： {布局3: '垂直'，align: '右侧'，verticalAlign: '顶部'，backgroundColor: '苹果，data: [1070，3198，6353，2035，8745] }，{ name: '橘子，data: [9330，1560，9470，4080，6784] }，{ name: '梨子，data: [2735，9140，4054，7329，3478]}]})； });/script/head body div id=' barChart ' style=' width : 1200 px；高度： 550像素；边距： 0自动/div/body/html 2，运行效果图如下：

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

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

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