使用js画图之饼图

使用js画图之饼图

饼图是将一个圆分割为多个扇形。

样例：http://www.zhaojz.com.cn/demo/draw8.html

代码如下:

//饼图
//dot 圆点
//r 半径
//data 数据（一维数组）
function drawPie(dot, r, data){
    if(data && data.length > 0){
        var accumulationAngleOfSlope = new Number(0); //累计偏移角度
        var total = new Number(0);
        var i = 0;
        for(;i<data.length;i++){ //计算data的合计
            total += data[i];
        }
        for(i = 0;i<data.length;i++){
            var angle = new Number(360*data[i]/total).toFixed(3); //将data[i]/total转换为角度
            //画一个扇形
            drawSector(dot, r, new Number(angle), new Number(accumulationAngleOfSlope), true, Number(parseFloat(data[i]/total)*100).toFixed(3)+'%');
            accumulationAngleOfSlope = accumulationAngleOfSlope+parseFloat(angle); //累计偏移角度
        }
    }
}

赞 (0)

相关推荐

  • Javascript highcharts 饼图显示数量和百分比实例代码

    Javascript highcharts 饼图显示数量和百分比实例代码 最近公司项目需求有这样一个功能模块,highcharts 饼图显示数量和百分比 ,由于本人刚入门,看到这个需求不会写,于是就上网搜下相关资料,觉得一篇还不错记录下. <div class="piecleft" id="chart" style="height:350px; width: 350px;"> </div> <script type=

  • javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图

    javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图

    gRaphael 是一个致力于帮助开发人员在网页中绘制各种精美图表的 Javascript 库,基于强大的 Raphael 矢量图形库.你只需要编写几行简单的代码就能创建出精美的条形图.饼图.点图和曲线图. gRaphael 使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,是跨浏览器的矢量图形库,目前支持的浏览器包括: Firefox 3.0+,Safari 3.0+,Chrome 5.0+,Opera 9.5+ 以及 Internet Explorer 6.0+. 使用方法:在页

  • 使用javascript获取flash加载的百分比的实现代码

    复制代码 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>flash download</title> </head> <body> <object id="movie" classid="clsid:d27cdb6e-ae6d

  • html+js+highcharts绘制圆饼图表的简单实例

    html+js+highcharts绘制圆饼图表的简单实例

    实例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type&q

  • javascript 计算两个整数的百分比值

    复制代码 代码如下: ///计算两个整数的百分比值 function GetPercent(num, total) { num = parseFloat(num); total = parseFloat(total); if (isNaN(num) || isNaN(total)) { return "-"; } return total <= 0 ? "0%" : (Math.round(num / total * 10000) / 100.00 + &qu

  • 轻松使用JSP生成饼图

    轻松使用JSP生成饼图

    作者: BUILDER.COM JSP提供了很多简单实用的工具,其中包括从数据库中读出数据,发送数据,并能够把结果显示在一个饼状图形.现在让我们看看这一简单而实用的方法. 你所需要的东西 转自:动态网制作指南 www.knowsky.com 为了能正确运行这一文章相关的范例,你必须需要JDK 1.2或更高的版本.一个关系数据库管理系统.一个JSP网络服务器.我都是在Tomcat调试这些例子,同时我也使用了Sun Java 2 SDK发布的com.sun.image.codec.jpegclass

  • JavaScript根据数据生成百分比图和柱状图的实例代码

    复制代码 代码如下: <HTML> <head> <title>JS百分比图和柱状图</title>   <xml:namespace prefix="v"/>   <style>    v\:* {behavior=url(#default#VML)}   </style>   <style>   a:hover {color:maroon}   h2 {color:#006600;  

  • javascript下正则匹配百分比的代码

    <script language="javascript">     var re = /^-?\d+%$/;     alert(re.test('50%'));     alert(re.test('-25%'));     alert(re.test('3a5%')); </script>

  • 使用js画图之饼图

    使用js画图之饼图 饼图是将一个圆分割为多个扇形. 样例:http://www.zhaojz.com.cn/demo/draw8.html 复制代码 代码如下: //饼图 //dot 圆点 //r 半径 //data 数据(一维数组) function drawPie(dot, r, data){     if(data && data.length > 0){         var accumulationAngleOfSlope = new Number(0); //累计偏移角

  • 使用JS画图之点、线、面

    JS画图的想法经过大脑的时候,觉得有点意思,所以就实践了一番.JS画图为系列文章,本是讲点.线和面 先看样例:http://www.zhaojz.com.cn/demo/draw5.html 一.点 这里的点我们使用span标签表示 复制代码 代码如下: //描点,参数有点的大小,颜色,点的坐标和标签; 很明显opts参数是一个对象 function drawPoint(opts){     document.write("<span id='"+opts.point[0]+&q

  • C#画图之饼图折线图的实现方法

    本文实例讲述了C#画图之饼图折线图的实现方法,是C#程序设计中非常实用的技巧.分享给大家供大家参考.具体方法分析如下: 显示图像的控件定义如下: public PlaceHolder PlaceHolder1; 各个图像的类别名称如下: PictureType    图形种类    5    chChartTypeBarClustered    簇状条形图    0    NULL PictureType    图形种类    7    chChartTypeBarClustered3D   

  • 使用js画图之正弦曲线

    数学式:y=Asin(ωx+φ)+k 样例:http://www.zhaojz.com.cn/demo/draw7.html JS函数的声明: 复制代码 代码如下: //画正弦曲线 //dot 原点 //amplitude    振幅 -- A //initialPhase 初相 -- φ //setover 偏距 -- k //palstance 角速度 -- ω //len 周期数 function drawSinusoid(dot, amplitude,initialPhase,palst

  • 使用js画图之圆、弧、扇形

    半径为r的圆上的点p(x,y)与圆心O(x0,y0)的关系: x = x0+rcosA;  y = y0+rsinA ,A为弧度 样例:http://www.zhaojz.com.cn/demo/draw6.html 一.圆 复制代码 代码如下: //圆形/椭圆 //dot 圆点 //r 半径 //compressionRatio 垂直压缩比 function drawCircle(dot, r, compressionRatio, data){     var pstart = [dot[0]

  • JS画图(非VML)--兼容IE/FF

    Untitled 1 .style1 { font-size: x-small; } function makedot(x,y){ //画点函数 document.write(" ") } /** 函数功能:根据给定的圆心和半径画圆 函数思路:根据半径及圆心坐标利用数学方法计算从0°到360°的每点的坐标,并画出来. */ function circle(x,y,r){ //(x,y)圆心,r半径 var dotx,doty,radio; var Pi=Math.PI; makedot

  • 使用js画图之画切线

    样例:http://www.zhaojz.com.cn/demo/draw9.html 复制代码 代码如下: //画切线 //point 圆外的一点 //dot 圆心 //r 半径 function drawCircleTangent(point, dot, r){     //画辅助线-start     var color = 'DarkRed'; //切线的颜色     var color2 = "#ccc"; //其它辅助线的颜色     drawLine(dot, [dot[

  • 纯JS 绘制数学函数

    绘图对象Plot,包含了JS画点,JS画线,JS画正弦sin,JS画余弦cos,tan,圆,多边形. 可设置原点位置,画笔颜色,画笔粗细,坐标线颜色. 其实原理很简单,用长1px宽1px的div模拟点,由点及线,由线及面. 贴上来权当相互学习,以免JS新手觉得js画图是多神秘的事情. JS绘制数学函数图 body{ margin: 0px; padding: 0px; } //辅助函数 function $(id){return document.getElementById(id)}; /**

  • python+selenium定时爬取丁香园的新型冠状病毒数据并制作出类似的地图（部署到云服务器）

    python+selenium定时爬取丁香园的新型冠状病毒数据并制作出类似的地图（部署到云服务器）

    前言 硬要说这篇文章怎么来的,那得先从那几个吃野味的人开始说起-- 前天睡醒:假期还有几天:昨天睡醒:假期还有十几天:今天睡醒:假期还有一个月-- 每天过着几乎和每个假期一样的宅男生活,唯一不同的是玩手机已不再是看剧.看电影.打游戏了,而是每天都在关注着这次新冠肺炎疫情的新闻消息,真得希望这场战"疫"快点结束,让我们过上像以前一样的生活.武汉加油!中国加油!! 本次爬取的网站是丁香园点击跳转,相信大家平时都是看这个的吧. 一.准备 python3.7 selenium:自动化测试框架,

随机推荐