菜单

附demo源码下载

2020年3月18日 - 澳门太阳娱乐手机登录

本文实例陈述了jQuery插件HighCharts绘制的2D堆柱状图效果。分享给我们供我们参谋,具体如下:

jQuery插件HighCharts绘制2D柱状图、折线图的结合双轴图效果示例【附demo源码下载】,jqueryhighcharts

附demo源码下载。本文实例陈述了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(){
     $('#doubleColumnLineChart').highcharts({
       chart: {
         zoomType: 'xy'
       },
       title: {
         text: '(jb51.net)某城市的月平均温度和降雨量'
       },
       xAxis: [{
         categories: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月']
       }],
       yAxis: [{ // 主Y轴
         labels: {
           format: '{value}°C',
           style: {
             color: '#89A54E',
             fontSize: '12px'
           }
         },
         title: {
           text: '温度',
           style: {
             color: '#89A54E',
             fontSize: '12px'
           }
         }
       }, { // 次Y轴
         title: {
           text: '降雨量',
           style: {
             color: '#4572A7'
           }
         },
         labels: {
           format: '{value} mm',
           style: {
             color: '#4572A7'
           }
         },
         opposite: true
       }],
       tooltip: {
         shared: true
       },
       legend: {
         layout: 'vertical',
         align: 'left',
         x: 120,
         verticalAlign: 'top',
         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],
         tooltip: {
           valueSuffix: ' mm'
         }
       }, {
         name: '温度',
         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: {
           valueSuffix: '°C'
         }
       }]
     });
   });
</script>
</head>
<body>
  <div id="doubleColumnLineChart" style="width: 1200px; height: 500px; margin: 0 auto"></div>
</body>
</html>

2、运转效果图:

图片 1

附:总体实例代码点击这里本站下载

越来越多关于jQuery相关内容感兴趣的读者可查阅本站专项论题:《jQuery常用插件及用法总计》、《jquery中Ajax用法总计》、《jQuery表格(tableState of Qatar操作技巧汇总》、《jQuery扩大本事总计》、《jQuery习认为常杰出特效汇总》及《jquery选择器用法计算》

期望本文所述对我们jQuery程序设计有所协助。

本文实例陈说了jQuery插件HighCharts绘制2D柱状…

1、HighCharts之2D堆柱状图源码

HighCharts 2D堆柱状图${ $.highcharts({ chart: { type: 'column' }, title: { text: '&#22534;&#26609;&#29366;&#22270;' }, xAxis: { categories: ['&#26143;&#26399;&#19968;', '&#26143;&#26399;&#20108;', '&#26143;&#26399;&#19977;', '&#26143;&#26399;&#22235;', '&#26143;&#26399;&#20116;','&#26143;&#26399;&#20845;','&#26143;&#26399;&#26085;'] }, yAxis: { min: 0, title: { text: '&#27700;&#26524;&#38144;&#37327;' }, stackLabels: { enabled: true, style: { fontWeight: 'bold', color: (Highcharts.theme &amp;&amp; Highcharts.theme.textColor) || 'gray' } } }, legend: { align: 'right', x: -70, verticalAlign: 'top', y: 20, floating: true, backgroundColor: (Highcharts.theme &amp;&amp; Highcharts.theme.legendBackgroundColorSolid) || 'white', borderColor: '#CCC', borderWidth: 1, shadow: false }, tooltip: { formatter: function() { return '&lt;b&gt;'+ this.x +'&lt;/b&gt;&lt;br/&gt;'+ this.series.name +': '+ this.y +'&lt;br/&gt;'+ 'Total: '+ this.point.stackTotal; } }, plotOptions: { column: { stacking: 'normal', dataLabels: { enabled: true, color: (Highcharts.theme &amp;&amp; Highcharts.theme.dataLabelsColor) || 'white', style: { textShadow: '0 0 3px black, 0 0 3px black' } } } }, series: [{ name: '&#33529;&#26524;', data: [58, 31, 49, 12, 35,65,98] }, { name: '&#26792;&#23376;', data: [12, 45, 63, 24, 17,87,35] }, { name: '&#26691;&#23376;', data: [67, 89, 47, 27, 58,67,34] }, { name: '&#27224;&#23376;', data: [54, 36, 78, 64, 35,78,94] }] }); }); 

附:一体化实例代码点击这里本站下载

越多关于jQuery相关内容感兴趣的读者可查阅本站专项论题:《jQuery常用插件及用法总括》、《jquery中Ajax用法计算》、《jQuery表格操作技能汇总》、《jQuery扩大手艺总括》、《jQuery清汤寡水特出特效汇总》及《jquery选拔器用法总计》

期待本文所述对大家jQuery程序设计具备协助。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图