最简单的数据饼状图

简介: 简单的函数: /* * lists 数据数组 * r 半径 * line 线宽度 * */ function canvas(lists,r,line) { var canvass = document.

简单的函数:

    /*
    * lists  数据数组
    * r      半径
    * line   线宽度
    * */
    function canvas(lists,r,line) {
        var canvass = document.getElementById('canvas');
        var c = document.createElement('canvas'),h=canvass.clientHeight,w=canvass.clientWidth;
        c.width=w,c.height=h,s=0.2,es=0.2,point={x:w/2,y:h/2},c_point={}, canvass.appendChild(c)
        var ctx=c.getContext("2d");
        if(lists.length<1) {
            ctx.fillText('暂时没有数据',point.x-35,point.y);
            return
        }
        var total=0,list2=[],total2=0,c_s
        for (var i =0;i<lists.length;i++){total+=parseInt(lists[i].value)}
        for (var i =0;i<lists.length;i++){
            if(i!=lists.length-1){
                c_s = parseInt(lists[i].value*100/total)
                total2+=c_s;
                list2.push(c_s)
            }
        }
        list2.push(100-total2);
        list2.forEach(function (v,i) {
            var p_x,p_y,l_x,t_x;
            ctx.beginPath();ctx.strokeStyle=lists[i].color;ctx.lineWidth=line;es=s+v*2/100
            ctx.arc(point.x,point.y,r,s*Math.PI,es*Math.PI);ctx.stroke();ctx.beginPath();
            c_point={x:point.x+Math.cos((s+es)*Math.PI/2)*90,y:Math.sin((s+es)*Math.PI/2)*90+point.y}
            ctx.moveTo(c_point.x,c_point.y)
            if(c_point.x<point.x){p_x=-5,l_x=-20,t_x=-85}else {p_x=5,l_x=30,t_x=35}
            if(c_point.y<point.y){p_y=-5}else {p_y=5}
            ctx.lineTo(c_point.x+p_x,c_point.y+p_y);ctx.lineTo(c_point.x+l_x,c_point.y+p_y);ctx.lineWidth=1;ctx.stroke();
            ctx.beginPath();ctx.fillStyle=lists[i].color;ctx.arc(c_point.x+l_x,c_point.y+p_y,3,0,2*Math.PI);ctx.fill();ctx.fillStyle=lists[i].color;
            ctx.fillText(lists[i].name,c_point.x+t_x,c_point.y+p_y+4);s=es
        })
    }

  

 

调用方法:

<div id="canvas" style="height: 400px;width: 400px;"></div>

var lists = [ {name:'县代贡献',value:50,color:'#6ED668'}, {name:'商户贡献',value:150,color:'#FCB747'}, {name:'业务员贡献',value:80,color:'#7680F5'}, {name:'用户贡献',value:100,color:'#4291F0'}, ] canvas(lists,75,30)

 

饼状图 :

  直接把   线的宽度设置为 半径的两倍  既可以实现饼状图

 

代码仅供参考,具体功能可以自己扩展。

个人博客 :精华所在   https://gilea.cn/

http://www.cnblogs.com/jiebba    我的博客,来看吧!

相关文章
|
3月前
R语言基于表格文件的数据绘制具有多个系列的柱状图与直方图
【9月更文挑战第9天】在R语言中,利用`ggplot2`包可绘制多系列柱状图与直方图。首先读取数据文件`data.csv`,加载`ggplot2`包后,使用`ggplot`函数指定轴与填充颜色,并通过`geom_bar`或`geom_histogram`绘图。参数如`stat`, `position`, `alpha`等可根据需要调整,实现不同系列的图表展示。
|
7月前
|
数据可视化 数据挖掘 定位技术
R语言读取Excel表格数据并绘制多系列柱状图、条形图
R语言读取Excel表格数据并绘制多系列柱状图、条形图
185 1
|
7月前
如何将Excel两列数据转换为统计图、曲线图、折线图?如何自定义某一列作为Excel的统计图横纵坐标?
如何将Excel两列数据转换为统计图、曲线图、折线图?如何自定义某一列作为Excel的统计图横纵坐标?
|
7月前
【SPSS】基础图形的绘制(条形图、折线图、饼图、箱图)详细操作过程(下)
【SPSS】基础图形的绘制(条形图、折线图、饼图、箱图)详细操作过程
484 0
|
7月前
【SPSS】基础图形的绘制(条形图、折线图、饼图、箱图)详细操作过程(上)
【SPSS】基础图形的绘制(条形图、折线图、饼图、箱图)详细操作过程
731 0
|
前端开发 索引
|
定位技术
pyecharts绘制条形图、饼图、散点图、词云图、地图等常用图形(二)
pyecharts绘制条形图、饼图、散点图、词云图、地图等常用图形
182 0
pyecharts绘制条形图、饼图、散点图、词云图、地图等常用图形(二)
|
数据可视化 数据挖掘 定位技术
pyecharts绘制条形图、饼图、散点图、词云图、地图等常用图形(一)
pyecharts绘制条形图、饼图、散点图、词云图、地图等常用图形
356 0
pyecharts绘制条形图、饼图、散点图、词云图、地图等常用图形(一)