效果：

源码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>饼状图</title>
  6. </head>
  7. <body>
  8. <canvas id="canvas"></canvas>
  9. <script>
  10.  
  11.     (function () {
  12.         var data = [{
  13.             "value":"0.4",
  14.             "color":"red",
  15.             "name":"JAVA"
  16.         },{
  17.             "value":"0.3",
  18.             "color":"green",
  19.             "name":"PYTHON"
  20.         },{
  21.             "value":"0.2",
  22.             "color":"blue",
  23.             "name":"C++"
  24.         },{
  25.             "value":"0.1",
  26.             "color":"grey",
  27.             "name":"PHP"
  28.         }];
  29.        var canvas = document.getElementById("canvas");
  30.        //设置宽高不从css中设置
  31.        canvas.width = 600;//设置canvas宽
  32.        canvas.height = 600;//设置canvas高
  33.        canvas.style.border = "1px solid red";
  34.         //获取上下文
  35.        var ctx = canvas.getContext("2d");
  36.        //画图
  37.         var x0  = 300,y0 = 300;//圆心
  38.         var x,y;//文字放置位置
  39.         var radius = 100;
  40.         var tempAngle = -90;//画圆的起始角度
  41.         for(var i = 0;i<data.length;i++){
  42.             var startAngle = tempAngle*Math.PI/180;//起始弧度
  43.             var angle = data[i].value*360;
  44.             var endAngle = (tempAngle+angle)*Math.PI/180;//结束弧度
  45.             var textAngle = tempAngle + 0.5*angle;//文字放的角度
  46.             x = x0 + Math.cos(textAngle*Math.PI/180)*(radius+20);//文字放的X轴
  47.             y = y0 + Math.sin(textAngle*Math.PI/180)*(radius+20);//文字放的Y轴
  48.             //如果文字在圆形的左侧，那么让文字 对齐方式为 文字结尾对齐当前坐标。
  49.             if( textAngle > 90 && textAngle < 270 ) {
  50.                 ctx.textAlign = 'end';
  51.             }
  52.             var text = data[i].name + " "+ data[i].value*100+"%";
  53.             ctx.fillText(text,x,y);
  54.             ctx.beginPath();
  55.             ctx.moveTo(x0,y0);
  56.             ctx.fillStyle = data[i].color;
  57.             ctx.arc(x0,y0,radius,startAngle,endAngle);
  58.             ctx.fill();
  59.             tempAngle += angle;
  60.         }
  61.     }());
  62. </script>
  63. </body>
  64. </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. 5-math中函数汇总

    math.h 数学函数库,一些数学计算的公式的具体实现是放在math.h里,具体有:1 三角函数double sin (double);double cos (double);double tan ( ...

  2. Java文件下载详解

    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException ...

  3. Golang 字符编码

    需要添加的库 go get code.google.com/p/go.text/encoding go get code.google.com/p/go.text/transform 两个转码函数 i ...

  4. loadrunner--vugen录制脚本提示“无Internet访问。您可能无法录制并执行业务进程”

    1.vugen录制脚本提示如下,为什么会提示这个呢?这个提示忽略会对录制脚本有影响吗?最好应该怎么操作? 惠普技术支持回复: 您可以试试,若点击“Yes”,是否可以继续录制网站?若可以的话,您也确定网 ...

  5. 如何设计Kafka？

    著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:Sugar Su链接:http://zhuanlan.zhihu.com/ms15213/20545422来源:知乎 此文稿来 ...

  6. [Training Video - 5] [Groovy Script Test Step - Collections, Exceptions] Array and ArrayList

    Array: def x = new String[5] x[0] = "India" x[1] = "USA" x[2] = "Korea" ...

  7. 删除重复记录的最新sql脚本

    delete from tb1   where id in(select t2.minnum from(select MIN(t1.id) as minnum,t1.col1 as ars ,COUN ...

  8. python 中numpy的var，std及cov

    var:表示方差, 即各项-均值的平方求和后再除以N , std:表示标准差,是var的平方根. cov:协方差 ,与var类似,但是除以(N-1)

  9. Atom 编辑器侧边栏忽略隐藏文件

    设置中配置需要忽略的文件后缀 package中找到treeview,勾选上这个配置就行

  10. Spring3.x错误----java.lang.ClassNotFoundException:org.aspectj.weaver.reflect.ReflectionWorld$ReflectionWorldException

    Spring3.x错误: 解决方法: 缺少aspectjweaver.jar包 下载地址: https://cn.jarfire.org/aspectjweaver.html