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(){ $(' # double column line chart ')).高图表({ chart: { zoomType: 'xy' }，title: { text: '(jb51.net))某城市的月平均温度和降雨量}，xAxis: [{ categories: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月， '十二月] }]，yAxis: [{ //主Y轴标签: { format :“{ value }”C }，样式： { color: '#89A54E '，fontSize: '12px' }，标题： { text: '温度，style: { color: '#89A54E '，fontSize: '12px' } } }，{ //次Y轴title: { text: '降雨量，样式： { color : ' # 4572 a7 ' }，标签: { format :"{ value } mm }，样式： { color : ' # 4572 a7 ' }， 对立： true }]、tooltip: { shared: true }、legend: { layout: '垂直、align :’左侧、x: 120、垂直对齐：’顶部、y: 100、floating: true、backgroundColor: '#FFFFFF' }、series: [{ name: '降雨量，color: '#4572A7 '，type: 'column '，yAxis: 1，data: [9.9，51.5，16.4，129.2，44.0，76.0，35.6，148.5，116.4，104.1，95.6，154.4]，工具提示3360 { value后缀3360 ' mm ' }，温度，color: '#89A54E '，type: 'spline '，data: [7.0，6.9，9.5，14.5，18.2，21.5，35.2，26.5，13.3，18.3，13.9，2.6]，tooltip : { value后缀3360 ' C ' } } })； });/script/head body div id=' double columnlinechart ' style=' width : 1200 px；高度： 500像素；边距： 0自动/div/body/html 2，运行效果图：

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

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

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