效果：

源码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>饼状图</title>

</head>

<body>

<canvas id="canvas"></canvas>

<script>

    (function () {

        var data = [{

            "value":"0.4",

            "color":"red",

            "name":"JAVA"

        },{

            "value":"0.3",

            "color":"green",

            "name":"PYTHON"

        },{

            "value":"0.2",

            "color":"blue",

            "name":"C++"

        },{

            "value":"0.1",

            "color":"grey",

            "name":"PHP"

        }];

       var canvas = document.getElementById("canvas");

       //设置宽高不从css中设置

       canvas.width = 600;//设置canvas宽

       canvas.height = 600;//设置canvas高

       canvas.style.border = "1px solid red";

        //获取上下文

       var ctx = canvas.getContext("2d");

       //画图

        var x0  = 300,y0 = 300;//圆心

        var x,y;//文字放置位置

        var radius = 100;

        var tempAngle = -90;//画圆的起始角度

        for(var i = 0;i<data.length;i++){

            var startAngle = tempAngle*Math.PI/180;//起始弧度

            var angle = data[i].value*360;

            var endAngle = (tempAngle+angle)*Math.PI/180;//结束弧度

            var textAngle = tempAngle + 0.5*angle;//文字放的角度

            x = x0 + Math.cos(textAngle*Math.PI/180)*(radius+20);//文字放的X轴

            y = y0 + Math.sin(textAngle*Math.PI/180)*(radius+20);//文字放的Y轴

            //如果文字在圆形的左侧，那么让文字 对齐方式为 文字结尾对齐当前坐标。

            if( textAngle > 90 && textAngle < 270 ) {

                ctx.textAlign = 'end';

            }

            var text = data[i].name + " "+ data[i].value*100+"%";

            ctx.fillText(text,x,y);

            ctx.beginPath();

            ctx.moveTo(x0,y0);

            ctx.fillStyle = data[i].color;

            ctx.arc(x0,y0,radius,startAngle,endAngle);

            ctx.fill();

            tempAngle += angle;

        }

    }());

</script>

</body>

</html>

canvas+js画饼状图的更多相关文章

  1. 利用Tkinter和matplotlib两种方式画饼状图

    当我们学习python的时候,总会用到一些常用的模块,接下来我就详细讲解下利用两种不同的方式画饼状图.首先利用[Tkinter]中的canvas画布来画饼状图: from tkinter import ...

  2. canvas学习之饼状图

    接着上一节说,这次我使用canvas绘制了饼状图,主要是SectorGraph.js, 引入 import {canvasPoint} from '../../assets/js/canvas';im ...

  3. vue中使用echarts画饼状图

    echarts的中文文档地址:https://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20EC ...

  4. HTML5之Canvas绘图实例——饼状图

    实现饼状分布画图(如下):调试环境:Firefox

  5. highcharts-3d.js实现饼状图

    嘛,首先,废话一下,这个插件挺好用的.我是因为做亮灯率demo所以接触了它. 首先引用外部文件,jQuery.js,highcharts.js,highcharts-3d.js,好的,这就搞定了第一步 ...

  6. 用D3.js画树状图

    做项目遇到一个需求,将具有层级关系的词语用树状图的形式展示它们之间的关系,像这样: 或者是这样: 上面的图片只是样例,跟我下面的代码里面用的数据不同 网上有很多这种数据可视化展示的js控件,我这里选择 ...

  7. D3.js：饼状图的制作

    假设有如下数据需要可视化: var dataset = [ 30 , 10 , 43 , 55 , 13 ]; 这样的值是不能直接绘图的.例如绘制饼状图的一个部分,需要知道一段弧的起始角度和终止角度, ...

  8. python plotly 画饼状图

    代码 import pandas as pd import numpy as np import plotly.plotly as py import plotly.graph_objs as go ...

  9. Python数据可视化：画饼状图、折线图、圈图

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. from math import pi import matplotlib ...

随机推荐

  1. opennebula 补丁制作与补丁升级

    参考文章:http://www.cnblogs.com/itech/archive/2009/08/19/1549729.htmlhttp://www.ibm.com/developerworks/c ...

  2. C语言时间处理

    一.简介 时间处理在编程中经常遇到,包括程序的运行时间和显示时间等.在标准C中, 日期和时间的处理包含在 time.h 的头文件中,需要使用日期和时间相关的类型的函数的话, 需要导入time.h. 二 ...

  3. 矩阵乘法np.dot()及np.multiply()以及*

    转载自 https://blog.csdn.net/u012609509/article/details/70230204 Python中的几种矩阵乘法 1. 同线性代数中矩阵乘法的定义: np.do ...

  4. UVa 12186 Another Crisis （DP）

    题意:有一个老板和n个员工,除了老板每个员工都有唯一的上司,老板编号为0,员工们为1-n,工人(没有下属的员工),要交一份请愿书, 但是不能跨级,当一个不是工人的员工接受到直系下属不少于T%的签字时, ...

  5. windows7文件夹怎样默认图片大图显示？

    先打开一个含有图片的文件夹,在文件夹空白处右键选择属性,打开自定义选项卡. 确定自定义选项卡 显示的是:“优化此文件夹:图片”. 然后,选择:组织--文件夹和搜索选项--查看--文件夹视图,应用到文件 ...

  6. Linux umask权限

    文件基本权限 Linux中文件权限由三部分组成: rw-r--r-- 前三位:表示用户所拥有的权限 中三位:表示用户所在组的权限 后三们:表示其他用户的权限 权限 八进制 十进制 - - - 000 ...

  7. Python WebDriver 文件上传（一）

    昨天写了Web 文件下载的ui自动化,下载之后,今天就要写web 文件上传的功能了. 当然从折腾了俩小时才上传成功.下面写一下自己操作的步骤 首先网上说的有很多方法 如 input 标签的最好做了,直 ...

  8. Zend_Application 流程详解

    本周没什么工作,zend 系统性的东西渐渐忘记,抽时间整理一下代码!Zend_Application 负责加载配置以及初始化资源,所以index.php 会有这行代码 /** Zend_Applica ...

  9. 深海划水队项目----七天冲刺之day3

    上完选修后的站立式会议: 工作进度 昨天已完成的工作: 推进开发进度,进一步理清开发思路. 今天计划完成的工作: 生成游戏块的类,其中包括7种不同的游戏块,每个游戏块又可以通过旋转得到另外一种形态. ...

  10. 将图片流输出到界面mvc

    System.Drawing.Image _CodeImage = _Code39.GetCodeImage(OrderNo, Code39.Code39Model.Code39Normal, tru ...