编程 Javascript

jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】

Posted in Javascript onMarch 09, 2017

本文实例讲述了jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果。分享给大家供大家参考，具体如下：

1、实例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HighCharts 2D柱状图、折线图的组合多轴图</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript">
   $(function(){
     $('#someColumnLineChart').highcharts({
       chart: {
         zoomType: 'xy'
       },
       title: {
         text: '(3water.com)某城市有关气候参数'
       },
       xAxis: [{
         categories: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月']
       }],
       yAxis: [{ // 主Y轴
         labels: {
           formatter: function() {
             return this.value +'°C';
           },
           style: {
             color: '#89A54E'
           }
         },
         title: {
           text: '温度',
           style: {
             color: '#89A54E'
           }
         },
         opposite: true
       }, { // 次Y轴
         gridLineWidth: 0,
         title: {
           text: '降雨量',
           style: {
             color: '#4572A7'
           }
         },
         labels: {
           formatter: function() {
             return this.value +' mm';
           },
           style: {
             color: '#4572A7'
           }
         }
       }, { // 第三级Y轴
         gridLineWidth: 0,
         title: {
           text: '气压',
           style: {
             color: '#AA4643'
           }
         },
         labels: {
           formatter: function() {
             return this.value +' mb';
           },
           style: {
             color: '#AA4643'
           }
         },
         opposite: true
       }],
       tooltip: {
         shared: true
       },
       legend: {
         layout: 'vertical',
         align: 'left',
         x: 120,
         verticalAlign: 'top',
         y: 80,
         floating: true,
         backgroundColor: '#FFFFFF'
       },
       series: [{
         name: '降雨量',
         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'
         }
       }, {
         name: '气压',
         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],
         marker: {
           enabled: false
         },
         dashStyle: 'shortdot',
         tooltip: {
           valueSuffix: ' 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: {
           valueSuffix: ' °C'
         }
       }]
     });
   });
</script>
</head>
<body>
  <div id="someColumnLineChart" style="width: 1200px; height: 500px; margin: 0 auto"></div>
</body>
</html>

2、运行效果图：

jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】

- Author -

翱翔天地

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

超级退弹代码

Jul 07 Javascript

js 跳出页面的frameset框架示例介绍

Dec 23 Javascript

jQuery网页版打砖块小游戏源码分享

Aug 20 Javascript

jQuery ui实现动感的圆角渐变网站导航菜单效果代码

Aug 26 Javascript

JavaScript编写页面半透明遮罩效果的简单示例

May 09 Javascript

AngularJS开发教程之控制器之间的通信方法分析

Dec 25 Javascript

bootstrap输入框组件使用方法详解

Jan 19 Javascript

JavaScript判断浏览器及其版本信息

Jan 20 Javascript

vue拦截器Vue.http.interceptors.push使用详解

Apr 22 Javascript

关于Vue在ie10下空白页的debug小结

May 02 Javascript

浅谈Vue3.0之前你必须知道的TypeScript实战技巧

Sep 11 Javascript

layui点击按钮页面会自动刷新的解决方案

Oct 25 Javascript

Vue监听数据对象变化源码

Mar 09 #Javascript

html+javascript+bootstrap实现层级多选框全层全选和多选功能

Mar 09 #Javascript

Node.js常用工具之util模块

Mar 09 #Javascript

js遍历json对象所有key及根据动态key获取值的方法(必看)

Mar 09 #Javascript

jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】

Mar 09 #Javascript

js实现简单的二级联动效果

Mar 09 #Javascript

jquery表单提交带错误信息提示效果

Mar 09 #Javascript