温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

怎么在jQuery中使用HighCharts实现2D柱状图

发布时间:2021-04-15 16:29:38 阅读:169 作者:Leah 栏目:web开发
前端开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

本篇文章为大家展示了怎么在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'(jb51.net)某城市有关气候参数'
       },
       xAxis: [{
         categories: ['一月''二月''三月''四月''五月''六月','七月''八月''九月''十月''十一月''十二月']
       }],
       yAxis: [{ // 主Y轴
         labels: {
           formatterfunction() {
             return this.value +'°C';
           },
           style: {
             color'#89A54E'
           }
         },
         title: {
           text'温度',
           style: {
             color'#89A54E'
           }
         },
         oppositetrue
       }, { // 次Y轴
         gridLineWidth0,
         title: {
           text'降雨量',
           style: {
             color'#4572A7'
           }
         },
         labels: {
           formatterfunction() {
             return this.value +' mm';
           },
           style: {
             color'#4572A7'
           }
         }
       }, { // 第三级Y轴
         gridLineWidth0,
         title: {
           text'气压',
           style: {
             color'#AA4643'
           }
         },
         labels: {
           formatterfunction() {
             return this.value +' mb';
           },
           style: {
             color'#AA4643'
           }
         },
         oppositetrue
       }],
       tooltip: {
         sharedtrue
       },
       legend: {
         layout'vertical',
         align'left',
         x120,
         verticalAlign'top',
         y80,
         floatingtrue,
         backgroundColor'#FFFFFF'
       },
       series: [{
         name'降雨量',
         color'#4572A7',
         type'column',
         yAxis1,
         data: [50.971.596.4129.2144.0106.0135.6148.5216.4194.195.654.8],
         tooltip: {
           valueSuffix' mm'
         }
       }, {
         name'气压',
         type'spline',
         color'#AA4643',
         yAxis2,
         data: [101510121015.91015.51012.31009.51009.61010.21015.11016.91008.21026.7],
         marker: {
           enabledfalse
         },
         dashStyle'shortdot',
         tooltip: {
           valueSuffix' mb'
         }
       }, {
         name'温度',
         color'#89A54E',
         type'spline',
         data: [3.06.811.516.518.222.528.236.523.318.313.92.6],
         tooltip: {
           valueSuffix' °C'
         }
       }]
     });
   });
</script>
</head>
<body>
  <div id="someColumnLineChart" ></div>
</body>
</html>

2、运行效果图:

怎么在jQuery中使用HighCharts实现2D柱状图

上述内容就是怎么在jQuery中使用HighCharts实现2D柱状图,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注亿速云行业资讯频道。

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×