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(){
     $('#columnLinePieChart').highcharts({
       chart: {
       },
       title: {
         text: '水果销售组合图'
       },
       xAxis: {
         categories: ['苹果', '橘子', '梨子', '香蕉', '草莓']
       },
       tooltip: {
         formatter: function() {
           var s;
           if (this.point.name) {
             s = ''+
               this.point.name +': '+ this.y +' kg';
           } else {
             s = ''+
               this.x +': '+ this.y;
           }
           return s;
         }
       },
       labels: {
         items: [{
           html: '销售总量',
           style: {
             left: '40px',
             top: '8px',
             color: 'black'
           }
         }]
       },
       series: [{
         type: 'column',
         name: '星期一',
         data: [3, 2, 1, 3, 4]
       }, {
         type: 'column',
         name: '星期二',
         data: [2, 3, 5, 7, 6]
       }, {
         type: 'column',
         name: '星期三',
         data: [4, 3, 3, 9, 5]
       }, {
         type: 'column',
         name: '星期四',
         data: [4, 3, 3, 9, 4]
       },{
         type: 'column',
         name: '星期五',
         data: [4, 3, 3, 9, 6]
       },{
         type: 'column',
         name: '星期六',
         data: [4, 3, 3, 9, 8]
       },{
         type: 'column',
         name: '星期日',
         data: [4, 3, 3, 9, 4]
       },{
         type: 'spline',
         name: '平均值',
         data: [3, 2.67, 3, 6.33, 3.33],
         marker: {
          lineWidth: 2,
          lineColor: Highcharts.getOptions().colors[7],
          fillColor: 'white'
         }
       }, {
         type: 'pie',
         name: '销售比例',
         data: [{
           name: '星期一',
           y: 13,
           color: Highcharts.getOptions().colors[0]
         }, {
           name: '星期二',
           y: 23,
           color: Highcharts.getOptions().colors[1]
         }, {
           name: '星期三',
           y: 49,
           color: Highcharts.getOptions().colors[2]
         }, {
           name: '星期四',
           y: 25,
           color: Highcharts.getOptions().colors[3]
         }, {
           name: '星期五',
           y: 36,
           color: Highcharts.getOptions().colors[4]
         }, {
           name: '星期六',
           y: 74,
           color: Highcharts.getOptions().colors[5]
         }, {
           name: '星期日',
           y: 84,
           color: Highcharts.getOptions().colors[6]
         }],
         center: [100, 80],
         size: 100,
         showInLegend: true,
         dataLabels: {
           enabled: true
         }
       }]
     });
   });
</script>
</head>
<body>
  <div id="columnLinePieChart" style="width: 1200px; height: 500px; margin: 0 auto"></div>
</body>
</html>

2、运行效果图:

jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】

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

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

Javascript 相关文章推荐
代码生成器 document.write()
Apr 15 Javascript
window.event快达到全浏览器支持了,以后使用就方便了
Nov 30 Javascript
jQuery中scrollTop()方法用法实例
Jan 16 Javascript
javascript 实现 原路返回
Jan 21 Javascript
BootStrap中
Dec 10 Javascript
详解Jquery Easyui的验证扩展
Jan 09 Javascript
Angularjs使用指令做表单校验的方法
Mar 31 Javascript
详解axios在vue中的简单配置与使用
May 10 Javascript
vue使用axios实现文件上传进度的实时更新详解
Dec 20 Javascript
Vue组件的使用教程详解
Jan 05 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
Sep 06 Javascript
Vue.js 中的 v-cloak 指令及使用详解
Nov 19 Javascript
100行代码理解和分析vue2.0响应式架构
Mar 09 #Javascript
js实现悬浮窗效果(支持拖动)
Mar 09 #Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
Mar 09 #Javascript
Bootstrap禁用响应式布局的实现方法
Mar 09 #Javascript
微信小程序 template模板详解及实例代码
Mar 09 #Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
Mar 09 #Javascript
canvas实现爱心和彩虹雨效果
Mar 09 #Javascript
You might like
模仿OSO的论坛(四)
2006/10/09 PHP
php打开远程文件的方法和风险及解决方法
2013/11/12 PHP
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
让firefox支持IE的一些方法的javascript扩展函数代码
2010/01/02 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
2013/01/27 Javascript
extjs ColumnChart设置不同的颜色实现代码
2013/05/17 Javascript
比较新旧两个数组值得增加和删除的JS代码
2013/10/30 Javascript
Bootstrap使用基础教程详解
2016/09/05 Javascript
基于Layer+jQuery的自定义弹框
2020/05/26 Javascript
微信小程序倒计时功能实现代码
2017/11/09 Javascript
基于JavaScript实现每日签到打卡轨迹功能
2018/11/29 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
2019/01/04 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
2019/02/19 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
2019/03/19 jQuery
详解小程序中h5页面onShow实现及跨页面通信方案
2019/05/30 Javascript
Vue分页器实现原理详解
2019/06/28 Javascript
微信小程序使用前置摄像头拍照
2020/10/22 Javascript
[01:28:44]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第一场 1月10日
2021/03/11 DOTA
详解Python中for循环的使用
2015/04/14 Python
Python获取邮件地址的方法
2015/07/10 Python
常用python编程模板汇总
2016/02/12 Python
Python和C/C++交互的几种方法总结
2017/05/11 Python
Python3使用SMTP发送带附件邮件
2020/06/16 Python
python的中异常处理机制
2018/08/30 Python
python正则-re的用法详解
2019/07/28 Python
浅析PyTorch中nn.Linear的使用
2019/08/18 Python
如何用python爬取微博热搜数据并保存
2021/02/20 Python
HTML5实现签到 功能
2018/10/09 HTML / CSS
英国游戏机和游戏购物网站:365games.co.uk
2018/06/18 全球购物
后勤岗位职责
2013/11/26 职场文书
会计专业毕业生求职信分享
2014/01/03 职场文书
八项规定对照检查材料
2014/08/31 职场文书
2015年班组长工作总结
2015/04/10 职场文书
新年祝酒词大全
2015/08/11 职场文书
java解析XML详解
2021/07/09 Java/Android