在进行数据的统计分析时, 饼图也是比较经常用到的一类统计图。

需求分析:

  一个饼图一般包含以下几部分:
  1、标题
  2、扇形
  3、份额(百分比)
  4、标识器
 
 
 设计:
 
 数据部分, 我们采用Json来表达:
var jsonData = {
"title": "2014 各分公司成本比例",
"data": [{ "title": "广州", "persent": "0.2" }, { "title": "上海", "persent": "0.2" },
{ "title": "北京", "persent": "0.3" }, { "title": "杭州", "persent": "0.2" },
{ "title": "成都", "persent": "0.1" }] };

绘图部分, 我们采用HTML5画布的相关功能,主要采用画弧形arc、画线lineto、绘制文字fillText等方法。

效果:

具体实现请下载源代码。

使用HTML5画饼图的更多相关文章

  1. (转)浅谈HTML5与css3画饼图!

    神马系饼图? 饼图,大家都应该熟知,在统计数据对比方面,几乎处处用到.如cnzz的统计饼图 从饼图中,很形象地展示了访问者地区的分布,以扇形为块的方式拼成一个大圆. 都使用什么方法实现 目前众多站点制 ...

  2. html5实现饼图和线图

    html5实现饼图和线图-我们到底能走多远系列(34) 我们到底能走多远系列(34) 扯淡: 送给各位一段话:     人生是一个不断做加法的过程     从赤条条无牵无挂的来     到学会荣辱羞耻 ...

  3. HTML5绘制饼图示例(一)

    原文地址:http://www.2cto.com/kf/201108/100251.html HTML5引入Canvas元素,用于图形的绘制,我们可以仅仅基于HTML和JavaScript就能绘制出原 ...

  4. Html5绘制饼图统计图

    这里要介绍的是一个jQuery插件:jquery.easysector.js Html5提供了强大的绘图API,让我们能够使用javascript轻松绘制各种图形.本文将主要讲解使用HTML5绘制饼图 ...

  5. html5画饼形图

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm10.aspx ...

  6. HTML5画:线、圆、矩形、渐变

    示例一:矩形 <!DOCTYPE html><head> <meta charset=utf-8> <title>HTML5画线.圆.矩形</ti ...

  7. html5实现饼图和线图-我们到底能走多远系列(34)

    我们到底能走多远系列(34) 扯淡: 送给各位一段话:     人生是一个不断做加法的过程     从赤条条无牵无挂的来     到学会荣辱羞耻 礼仪规范     再到赚取世间的名声 财富 地位    ...

  8. 使用matplotlib画饼图

    import matplotlib.pyplot as pltx = [4, 9, 21, 55, 30, 18]labels = ['math', 'history', 'chemistry', ' ...

  9. Matplotlib学习---用matplotlib画饼图/面包圈图(pie chart, donut chart)

    我在网上随便找了一组数据,用它来学习画图.大家可以直接把下面的数据复制到excel里,然后用pandas的read_excel命令读取.或者直接在脚本里创建该数据. 饼图: ax.pie(x,labe ...

随机推荐

  1. 查询SQL优化

    SQL优化的一般步骤 通过show status命令了解各种SQL的执行频率定位执行效率较低的SQL语句,重点select通过explain分析低效率的SQL确定问题并采取相应的优化措施 优化措施 s ...

  2. matlab .fig转化成pdf 缺失

    1. 在matlab figure里面,Edit -> Copy Figure 2. 粘贴到ppt中即可

  3. Web安全漏洞深入分析及其安全编码

    摘自:http://blog.nsfocus.net/web-vulnerability-analysis-coding-security/ 超全Web漏洞详解及其对应的安全编码规则,包括:SQL注入 ...

  4. QT STUDY 模型-视图-控制器

  5. CodeForces - 612C Replace To Make Regular Bracket Sequence 压栈

    C. Replace To Make Regular Bracket Sequence time limit per test 1 second memory limit per test 256 m ...

  6. bs和cs

    CS(Client/Server):客户端----服务器结构.C/S结构在技术上很成熟,它的主要特点是交互性强.具有安全的存取模式.网络通信量低.响应速度快.利于处理大量数据.因为客户端要负责绝大多数 ...

  7. AORUS GA-Z270X-Gaming 5開箱

    「AORUS」這個品牌名稱由埃及神祇荷魯斯(戰爭與狩獵之神)的名字衍生而成.荷魯斯通常被勾勒為獵鷹的形象,因此獵鷹的頭形被用作AORUS品牌的商標於2014年,本來只做為用在電競筆電及一些週邊方面,但 ...

  8. java集合系列之三(ArrayList)

    上一章,我们学习了Collection的架构.这一章开始,我们对Collection的具体实现类进行讲解:首先,讲解List,而List中ArrayList又最为常用.因此,本章我们讲解ArrayLi ...

  9. servlet生命周期和执行流程

    一 .生命周期 servlet 声明周期可以分四个阶段: 类装载过程 init() 初始化过程 service() 服务过程,选择doGet \ doPost destroy() 销毁过程 servl ...

  10. python调用matlab

    官网链接: https://ww2.mathworks.cn/help/matlab/matlab_external/call-user-script-and-function-from-python ...