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 相关文章推荐
List the UTC Time on a Computer
Jun 11 Javascript
jQuery 仿百度输入标签插件附效果图
Jul 04 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
Sep 24 Javascript
JavaScript function函数种类详解
Feb 22 Javascript
Javascript中的迭代、归并方法详解
Jun 14 Javascript
原生js实现无限循环轮播图效果
Jan 20 Javascript
JS实现向iframe中表单传值的方法
Mar 24 Javascript
JavaScript 用fetch 实现异步下载文件功能
Jul 21 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
Feb 09 Javascript
Vue-Router模式和钩子的用法
Feb 28 Javascript
详解angularjs4部署文件过大解决过程
Dec 05 Javascript
JS实现继承的几种常用方式示例
Jun 22 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
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-1 开始了解php
2011/07/03 PHP
yii2.0框架多模型操作示例【添加/修改/删除】
2020/04/13 PHP
给Javascript数组插入一条记录的代码
2007/08/30 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
使用GruntJS构建Web程序之安装篇
2014/06/04 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
2014/06/05 Javascript
javascript连续赋值问题
2015/07/08 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
2016/08/25 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
2016/12/21 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
2017/01/20 Javascript
微信小程序 转发功能的实现
2017/08/04 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
2017/12/12 Javascript
浅谈从React渲染流程分析Diff算法
2018/09/08 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
2018/10/17 Javascript
Node.js使用supervisor进行开发中调试的方法
2019/03/26 Javascript
JS计算斐波拉切代码实例
2019/09/12 Javascript
JavaScript实现栈结构Stack过程详解
2020/03/07 Javascript
[02:23]2014DOTA2国际邀请赛中国战队回顾
2014/08/01 DOTA
[52:26]完美世界DOTA2联赛决赛 FTD vs Phoenix 第一场 11.08
2020/11/11 DOTA
Python基类函数的重载与调用实例分析
2015/01/12 Python
使用requests库制作Python爬虫
2018/03/25 Python
python 不同方式读取文件速度不同的实例
2018/11/09 Python
python实现简易动态时钟
2018/11/19 Python
Python学习笔记之读取文件、OS模块、异常处理、with as语法示例
2019/06/04 Python
python实现双色球随机选号
2020/01/01 Python
Python利用Scrapy框架爬取豆瓣电影示例
2020/01/17 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
详解Python yaml模块
2020/09/23 Python
教育实习生的自我评价分享
2013/11/21 职场文书
仓库管理专业个人的自我评价
2013/12/30 职场文书
中秋晚会策划方案
2014/06/12 职场文书
2014年采购工作总结
2014/11/20 职场文书
2015年商场工作总结
2015/04/27 职场文书
Django一小时写出账号密码管理系统
2021/04/29 Python
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
2021/06/09 Vue.js
压缩Redis里的字符串大对象操作
2021/06/23 Redis