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加密密码到cookie的实现代码
Apr 18 jQuery
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
jquery实现简单实用的轮播器
May 23 jQuery
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
基于jquery实现左右上下移动效果
May 02 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
jquery分页优化操作实例分析
Aug 23 jQuery
Jquery动态列功能完整实例
Aug 30 jQuery
JQuery样式与属性设置方法分析
Dec 07 jQuery
jQuery表单校验插件validator使用方法详解
Feb 18 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 fsockopen中多线程问题的解决办法[翻译]
2011/11/09 PHP
php面象对象数据库操作类实例
2014/12/02 PHP
php中fsockopen用法实例
2015/01/05 PHP
PHP写的简单数字验证码实例
2017/05/23 PHP
PHP7如何开启Opcode打造强悍性能详解
2018/05/11 PHP
文本加密解密
2006/06/23 Javascript
高性能web开发 如何加载JS,JS应该放在什么位置?
2010/05/14 Javascript
使用jquery插件实现图片延迟加载技术详细说明
2011/03/12 Javascript
jQuery基本过滤选择器使用介绍
2013/04/18 Javascript
JavaScript实现按Ctrl键打开新页面
2014/09/04 Javascript
Javascript学习笔记之相等符号与严格相等符号
2014/11/23 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
2015/04/07 Javascript
Vue数据驱动模拟实现3
2017/01/11 Javascript
详解javascript立即执行函数表达式IIFE
2017/02/13 Javascript
react-router v4如何使用history控制路由跳转详解
2018/01/09 Javascript
vue自定义filters过滤器
2018/04/26 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
2018/05/13 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
2018/07/31 Javascript
python通过线程实现定时器timer的方法
2015/03/16 Python
Python实现的径向基(RBF)神经网络示例
2018/02/06 Python
对numpy中轴与维度的理解
2018/04/18 Python
python实现可逆简单的加密算法
2019/03/22 Python
Django REST框架创建一个简单的Api实例讲解
2019/11/05 Python
python微信公众号开发简单流程实现
2020/03/09 Python
PyCharm MySQL可视化Database配置过程图解
2020/06/09 Python
HTML5调用手机发短信和打电话功能
2020/04/29 HTML / CSS
Marriott中国:万豪国际酒店查询预订
2016/09/02 全球购物
英国最大的电子零件及配件零售商:Partmaster
2017/04/24 全球购物
俄罗斯在线大型超市:ТутПросто
2021/01/08 全球购物
Stokke美国官方网店:高级儿童家具、推车、汽车座椅和配件
2020/06/06 全球购物
垃圾回收的优点和原理。并考虑2种回收机制
2016/10/16 面试题
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
总务岗位职责
2013/11/19 职场文书
文员的职业生涯规划发展方向
2014/02/08 职场文书
2015年小学数学教师工作总结
2015/05/20 职场文书
2016年猴年新春致辞
2015/08/01 职场文书