jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】


Posted in jQuery onMarch 21, 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(){
   $('#pieChart').highcharts({
     chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false
      },
      title: {
        text: '(3water.com)2013年收入'
      },
      tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
      },
      plotOptions: {
        pie: {
          allowPointSelect: true,
          cursor: 'pointer',
          dataLabels: {
            enabled: true,
            color: '#000000',
            connectorColor: '#000000',
            format: '<b>{point.name}</b>: {point.percentage:.1f} %'
          }
        }
      },
      series: [{
        type: 'pie',
        name: '月收入占比',
        data: [
          ['一月', 8956],
          ['二月', 5612],
          ['三月', 4515],
          ['四月', 9565],
          ['五月', 2356],
          ['六月', 4512],
          ['七月', 5623],
          ['八月', 1245],
          ['九月', 4578],
          ['十月', 8754],
          ['十一月',6231],
          ['十二月',5124]
        ]
      }]
    });
 });
</script>
</head>
<body>
  <div id="pieChart" style="width: 1200px; height: 500px; margin: 0 auto"></div>
</body>
</html>

2、运行效果图如下:

jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】

jQuery 相关文章推荐
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
jquery easyui如何实现格式化列
Jul 30 jQuery
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
jQuery实现checkbox的简单操作
Nov 18 jQuery
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
jQuery实现的分页插件完整示例
May 26 jQuery
jquery实现简单自动轮播图效果
Jul 29 jQuery
jQuery实现简单轮播图效果
Dec 27 jQuery
使用jquery实现轮播图效果
Jan 02 jQuery
jquery插件制作 自增长输入框实现代码
Aug 17 #jQuery
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 #jQuery
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 #jQuery
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 #jQuery
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 #jQuery
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 #jQuery
jQuery轻松实现无缝轮播效果
Mar 22 #jQuery
You might like
php截取utf-8中文字符串乱码的解决方法
2010/03/29 PHP
PHP教程之PHP中shell脚本的使用方法分享
2012/02/23 PHP
如何让搜索引擎抓取AJAX内容解决方案
2014/08/25 PHP
PHP中trim()函数简单使用指南
2015/04/16 PHP
php实现简单的MVC框架实例
2015/09/23 PHP
yii框架数据库关联查询操作示例
2019/10/14 PHP
Laravel5.5 数据库迁移:创建表与修改表示例
2019/10/23 PHP
Locate a File Using a File Open Dialog Box
2007/06/18 Javascript
js 替换
2008/02/19 Javascript
javascript下利用arguments实现string.format函数
2010/08/24 Javascript
自制轻量级仿jQuery.boxy对话框插件代码
2010/10/26 Javascript
jquery mobile changepage的三种传参方法介绍
2013/09/13 Javascript
js控制文本框输入的字符类型方法汇总
2015/06/19 Javascript
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
jsp 网站引入外部css或者js失效问题解决
2016/10/31 Javascript
Bootstrap3 模态框使用实例
2017/02/22 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
2017/04/10 jQuery
angular学习之ngRoute路由机制
2017/04/12 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
2017/06/30 Javascript
详解express与koa中间件模式对比
2017/08/07 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
2017/10/27 jQuery
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
2019/07/26 Javascript
[47:45]Liquid vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
详解Django+Uwsgi+Nginx的生产环境部署
2018/06/25 Python
使用Numpy读取CSV文件,并进行行列删除的操作方法
2018/07/04 Python
解决python ogr shp字段写入中文乱码的问题
2018/12/31 Python
python如何解析配置文件并应用到项目中
2019/06/27 Python
python 进程池pool使用详解
2020/10/15 Python
ET Mall东森购物网:东森严选
2017/03/06 全球购物
房地产销售员的自我评价分享
2013/12/04 职场文书
生物科学专业个人求职信范文
2013/12/05 职场文书
五好家庭事迹材料
2014/12/20 职场文书
质量保证书格式
2015/02/27 职场文书
2015年全国保险公众宣传日活动方案
2015/05/06 职场文书
事业单位工作人员岗前培训心得体会
2016/01/08 职场文书
OpenCV 图像梯度的实现方法
2021/07/25 Python