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 script type=' text/JavaScript ' $(function(){ $(' # columlinepiechart ')).高级图表({ chart: { }，title : { text : }水果销售组合图}，xAxis: { categories: ['苹果', '橘子', '梨子', '香蕉', '草莓] }，工具提示： { formatter : function(){ var s；如果(这个。重点。name){ s=' this。重点。把这个命名为“:”。y ' kg} else { s=' ' this.x ' : ' this.y }返回s；} }，标签: { items : [{ html : '销售总量，style: { left: '40px '，top: '8px '，color : ' black ' } })，series: [{ type: 'column '，name: '星期一，data: [3，2，1，3，4] }，{ type: 'column '，name: '星期二，data: [2，3，5，7，6] }，{ type: 'column '，name: '星期三，data: [4，3，3，9，5] }，{ type: 'column '，name: '星期四，data: [4，3，3，9，4] }，{ type: 'column '，name: '星期五，data: [4，3，3，9，6] }，{ type: 'column '，名称： '星期六，data: [4，3，3，9，8] }，{ type: 'column '，name: '星期日，data: [4，3，3，9，4] }，{ type: 'spline '，name: '平均值，data: [3，2.67，3，6.33，3.33]，marker: { lineWidth: 2，line color : high charts。getoptions().colors[7]，fillColor: 'white' }，{ type: 'pie '，name: '销售比例，数据：[{ name : }星期一，y: 13，彩色：高点图表。getoptions().颜色[0] }，{ name: '星期二，y: 23，彩色：高点图表。getoptions().颜色[1] }，{ name: '星期三，y: 49，彩色：高点图表。getoptions().颜色[2] }，{ name: '星期四，y: 25，彩色：高点图表。getoptions().颜色[3] }，{ name: '星期五，y: 36，彩色：高点图表。getoptions().颜色[4] }，{ name: '星期六，y: 74，彩色：高点图表。getoptions().颜色[5] }，{ name: '星期日，y: 84，彩色：高点图表。getoptions().colors[6] }]，center: [100，80]，size: 100，showInLegend: true，data labels : { enable d : true } }]})；});/script/head body div id=' columnLinePieChart ' style=' width : 1200 px；高度： 500像素；边距： 0自动/div/body/html 2，运行效果图：

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

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

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