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(){ $(' # somcolumnlinechart ')).高图表({ chart: { zoomType: 'xy' }，title: { text: '(jb51.net))某城市有关气候参数}，xAxis: [{ categories: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月] }]，yAxis: [{ //主Y轴标签: { formatter : function(){返回此。值“C”；}，样式： { color : ' # 89 a54e ' }，标题： { text: '温度，样式： { color : ' # 89 a54e ' }，对立： true }，{ //次Y轴网格宽度： 0,标题： { text: '降雨量，style : { color : ' # 4572 a7 ' }，labels : { formatter : function(){ return this。值“mm”；}，样式： { color : ' # 4572 a7 ' } } }，{ //第三级Y轴网格宽度： 0,标题： { text: '气压，style : { color : ' # AA4643 ' }，labels : { formatter : function(){ return this。值“MB”；}、款式： {颜色： ' # aa 4643 ' } }、对立： true }]、tooltip: { shared: true }、legend: { layout: '垂直、align :’左侧、x: 120、垂直对齐：’顶部、y: 80、浮动： true、backgroundColor: ' '降雨量，color: '#4572A7 '，type: 'column '，yAxis: 1，data: [50.9，71.5，96.4，129.2，144.0，106.0，135.6，148.5，216.4，194.1，95.6，54.8]，tooltip: { valueSuffix: ' mm ' '气压，type: 'spline '，color: '#AA4643 '，yAxis: 2，data: [1015，1012，1015.9，1015.5，1012.3，1009.5，1009.6，1010.2，1015.1，1016.9，1008.2，1026.7]，标记： { enabled: false }，dashStyle: 'shortdot '，tooltip : { value suffix : ' MB ' }，{ name: '温度，color: '#89A54E '，type: 'spline '，data: [3.0，6.8，11.5，16.5，18.2，22.5，28.2，36.5，23.3，18.3，13.9，2.6]，tooltip : { value后缀3360 ' C ' } } })；});/script/head body div id=' someColumnLineChart ' style=' width : 1200 px；高度： 500像素；边距： 0自动/div/body/html 2，运行效果图：

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

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

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