<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pulse Results</title>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, i
nitial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width, target-densitydpi=medium-dpi" />
<meta name="format-detection" content="telephone=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<!-- Le styles -->
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<title>Pulse Results</title>
<link rel="Stylesheet" href="main.css" />
<link rel="Stylesheet" href="jquery.jqplot.min.css" />
<style type="text/css">
.navbar-fixed-bottom {margin-right:0;margin-left:0}
#user { display:none; margin-top:15px; margin-right: 10px;}
</style>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div class="result_show cf" style="height: 200px;">
<div id="result_pie" style=" width: 160px; height: 170px; position: relative; float: left;">
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
var s1 = [
['a', 10], ['b', 36], ['c', 20], ['d', 20], ['e', 14]
];
var plot3 = jQuery.jqplot('result_pie', [s1], {
axis: {
pad:0
},
grid: {
background: '#fafafa',
drawBorder: false,
shadow: false
},
seriesColors: ['#D74D4B', '#FC6763', '#F09571', '#FFD48F', '#FFEDAA'],
seriesDefaults: {
lineWidth: 1,
// make this a donut chart.
renderer: jQuery.jqplot.DonutRenderer,
rendererOptions: {
diameter: 140,
innerDiameter: 80,
sliceMargin: 2,
// Pies and donuts can start at any arbitrary angle.
startAngle: -90,
showDataLabels: false
},
shadow: false,
showLine: true
}
});
});
</script>
</div>
<script type="text/javascript" src="jquery.jqplot.min.js"></script>
<script type="text/javascript" src="jqplot.donutRenderer.min.js"></script>
</body>
</html>
http://www.jscharts.com/how-to-use-pie-charts
更多内容 请参考我的个人博客 http://ismartstudio.com/
guangqiang
- 浏览: 399102 次
- 性别:
- 来自: 青岛
-
博客专栏
-
-
wordpress步步高
浏览量：76137
-
-
Web前端开发之路
浏览量：92776
-
-
Flex/ActionSc...
浏览量：63960
-
-
Android/IOS 开...
浏览量：35356
-
-
PHP项目实战
浏览量：24504
最新评论
-
u013810758：
editplus
个人觉得 SublimeText 目前最好用的 文本编辑器 -
u010189889：
poll.zip (13.7 KB) 这个文件是干什么的？
手把手做一个PHP 投票系统 -
freerambo：
不错 赞一个
完美的 登录注册框 含漂亮的过渡、转换效果 -
uule：
不错不错，楼主好屌
国外经典JS、Jquery 各种资源集合 -
zyl324：
真心不错，学习了
用jquery都弱爆了 纯css 实现焦点图的 动态绚丽效果
相关推荐
在这个主题中，我们将深入探讨如何使用jQuery实现柱状图和饼状图，这两种图表在数据可视化中非常常见，尤其适用于展示分类数据的比例或数量。 柱状图是一种条形图形，用于比较不同类别的数据。在jQuery中，可以通过...
jQuery曲线图和饼状图插件是数据可视化的重要工具，它们能够帮助开发者快速创建美观且互动的数据展示，尤其适用于网页应用中。 jQuery曲线图插件通常提供了丰富的功能，包括但不限于以下几点： 1. **动态数据更新*...
挺不错的jQuery饼状图插件，装载数据也是非常方便的直接输出在table表格中，然后再绘出饼状图 展现百分比，鼠标放上去会显示想要比例的数据，还是很不错的，虽然没有Highcharts.js功能那么 强，至少饼状图是够用了...
在JavaScript的世界里，数据可视化是不可或缺的一部分，饼状图作为一种直观的数据展示方式，常用于表现各部分占总体的比例。Highcharts.js是一个强大的JavaScript图表库，它支持多种图表类型，包括饼状图，使得...
标题提及的"漂亮的jQuery饼状图"是一种常用于展示部分与整体比例关系的数据可视化图表。饼状图通过将圆周划分为各个扇区来表示数据的占比。jQuery插件如`Chart.js`或`jqplot`可以轻松实现这一功能。这些插件提供了...
通过将整个圆面分割成不同的扇区，饼状图能够直观地表达各个部分所占比例。这个插件支持动态旋转、渐变色以及标签和百分比的显示，使得饼状图更加生动和直观。对于大数据集，还提供了切片和拖动功能，让用户可以更...
本文将深入探讨jQuery图表控件，特别是基于jQuery实现的柱状图、曲线图、饼状图和仪表盘，这些都是数据可视化中不可或缺的元素。 柱状图是一种常用的数据表示方式，它通过矩形的长度来展示各分类的数值大小。在...
jQuery图表制作插件是Web开发中的一个重要工具，它允许开发者轻松地在网页上创建各种类型的可视化图表，如饼状图、柱状图和曲线图等。这些图表在数据分析、信息展示以及用户交互等方面发挥着至关重要的作用。在本篇...
在压缩包中，可能包括了不同风格和交互功能的饼状图，例如渐变色饼图、环状饼图、带有百分比显示的饼图等，这些都是提升数据可视化的有效手段。 柱状图则是用于比较类别间数值差异的图表，通常用于横向或纵向排列的...
可能采用了ASP.NET框架，结合JavaScript库如jQuery或D3.js来实现动态、交互式的饼状图展示。 4. 分析报告模块：系统能够自动生成分析报告，总结人口普查的主要发现，并通过饼状图进行可视化展示。这有助于用户快速...
它的基本使用步骤包括引入CSS和JS文件，然后为需要显示饼状图的元素添加特定的类名，并通过数据属性或JavaScript设置配置项，如`data-percent`指定百分比，`data-easing`设置动画效果等。 4. **Chart.js**：`Chart....
2. **准备数据**：饼状图的数据是以二维数组的形式提供的，每一项包含两个值，第一个是类别名，第二个是对应的数值或百分比。 ```javascript var data = [['类别1', 30], ['类别2', 20], ['类别3', 25], ['类别4', ...
饼状图插件如Chart.js、Google Charts等提供了丰富的自定义选项，包括颜色、标签、渐变色、百分比显示等，还可能支持环状图或者多环图的形式。 在开发中，选择合适的图表插件要考虑性能、易用性、可定制程度等因素...
3. **JavaScript / jQuery**: JavaScript负责动态更新图形，根据实际的进度百分比调整饼状图的角度。jQuery库可以使DOM操作更加简单，如选择元素、添加事件监听器等。当进度发生变化时，JavaScript会计算新的角度并...
`jquery-pie-loader.js` 的核心功能是生成饼状图，这是一种常见的数据可视化形式，用于表示部分与整体的关系。通过设置参数，开发者可以定制饼状图的颜色、大小、动画速度等特性，以适应不同的设计需求。例如，你...
因此，可能需要考虑使用SVG（Scalable Vector Graphics）作为替代，或者引入像jQuery或D3.js这样的库来提供更广泛的浏览器支持。 总之，ASP结合VML可以实现基于服务器端的统计图表生成，尽管现代Web开发倾向于使用...
饼状图是一种常用的统计图表，能够直观地表示各个部分占整体的比例。以下是一个详细的步骤指南： 1. **创建MySQL数据表**： 首先，我们需要在MySQL数据库中创建一个名为`chart_pie`的表，用于存储饼状图的数据。表...
4. **JavaScript交互**：利用JavaScript库如jQuery或Vanilla JS，监听用户的点击或悬停事件，动态修改`<path>`元素的`d`属性来实现扇区的展开和收缩效果。还可以添加动画效果，使交互更加平滑。 5. **数据绑定**：...