脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery插件HighCharts绘制2D饼图效果

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

 更新时间：2017年03月21日 10:04:40   作者：翱翔天地  
这篇文章主要介绍了jQuery插件HighCharts绘制2D饼图效果,结合完整实例形式分析了jQuery使用HighCharts插件绘制饼图效果的操作步骤与相关实现技巧,并附带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(){
   $('#pieChart').highcharts({
     chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false
      },
      title: {
        text: '(jb51.net)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相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

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

您可能感兴趣的文章:

相关文章

  • jQuery常用事件方法mouseenter+mouseleave+hover

    jQuery常用事件方法mouseenter+mouseleave+hover

    这篇文章主要介绍了jQuery常用事件方法mouseenter、mouseleave和hover方法，下文内容介绍详细，需要的小伙伴可以参考一下
    2022-03-03
  • 使用delegate方法为一个tr标签加一个链接

    使用delegate方法为一个tr标签加一个链接

    这篇文章主要介绍了使用delegate方法为一个tr标签加一个链接，并规定当这些事件发生时运行的函数，需要的朋友可以参考下
    2014-06-06
  • jQuery UI库中dialog对话框功能使用全解析

    jQuery UI库中dialog对话框功能使用全解析

    这篇文章主要介绍了jQuery UI库中dialog对话框功能使用全解析,文中列举了各种常用的dialog属性,整理得很全面,需要的朋友可以参考下
    2016-04-04
  • S2SH整合JQuery+Ajax实现登录验证功能实现代码

    S2SH整合JQuery+Ajax实现登录验证功能实现代码

    登录验证,在项目开发中很常用的，尤其是这一块非常有利于用户体验，感兴趣的朋友可以参考下，或许对你学习登陆验证有所帮助，好了闲话不多说了，看代码
    2013-01-01
  • jQuery预加载图片常用方法

    jQuery预加载图片常用方法

    这篇文章主要介绍了jQuery预加载图片常用方法,以两个简单实例分析了jQuery预加载图片的实现技巧,需要的朋友可以参考下
    2015-06-06
  • Jquery实现$.fn.extend和$.extend函数

    Jquery实现$.fn.extend和$.extend函数

    这篇文章主要介绍了Jquery实现$.fn.extend和$.extend函数的相关资料,需要的朋友可以参考下
    2016-04-04
  • js/jquery判断浏览器的方法小结

    js/jquery判断浏览器的方法小结

    在网站前端开发中，浏览器兼容性是前端开发框架要解决的第一个问题，要解决兼容性问题就得首先准确判断出浏览器的类型及其版本，而判断浏览器的版本一般只能通过分析浏览器的userAgent才能知道.今天我们把各种判断方法都总结一下，希望对大家有所帮助
    2014-09-09
  • jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍

    jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍

    这篇文章主要介绍了jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-09-09
  • jQuery实现的个性化返回底部与返回顶部特效代码

    jQuery实现的个性化返回底部与返回顶部特效代码

    这篇文章主要介绍了jQuery实现的个性化返回底部与返回顶部特效代码,涉及jQuery结合动画函数响应鼠标事件动态改变页面元素样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • 谈一谈jQuery核心架构设计

    谈一谈jQuery核心架构设计

    这篇文章主要和大家谈一谈jQuery核心架构设计，什么是jQuery核心架构设计，多方面了解jQuery核心架构设计，感兴趣的小伙伴们可以参考一下
    2016-03-03

最新评论