canvas 模仿highcharts自制饼图插件

最近一直在学习canvas,之前工作中经常用到highcharts,于是想着用canvas画一个饼图.制作成插件

对于js可直接引入.使用起来方便

1.引入js

    <script type=‘text/javascript‘ src="jquery.min.js"></script>
    <script type=‘text/javascript‘ src="pie.js"></script>

2.要插入饼图的区域

<div id="myDiv" style="width:400px;height: 400px; position:absolute"></div>

3.脚本部分

$("#myDiv").pie({
            data:[18,29,78,24,19,21,39]
        });

data即为数据 可自己修改 大小长度 不固定

4.效果

效果一:

效果二: 鼠标上浮 出现tooltip 若想修改内容 可通过pie.js中 drew方法去修改里面的显示内容,同样的若是想修改 边框及样式 可通过 paintdiv方法去修改

效果三:点击事件 若想修改内容 可通过pie.js中 drew方法去修改里面的显示内容,同样的若是想修改 边框及样式 可通过 paintdiv方法去修改 若要

显示一个新页面 在可以在声明中 将div替换成iframe 并在paintdiv中去修改样式及属性

5.pie.js源码

(function($){
    $.fn.extend({
        pie:function(options){
            var pie=new pieEffect(this,options);
            canvas.addEventListener("mousemove",function(e){
             var pp = getEventPosition(e);
             pie.drew(pp);
           },false);
               canvas.addEventListener("click",function(e){
            var pp = getEventPosition(e);
            pie.drew(pp,true);     

          },false);
        }

    })
    var myDiv=document.createElement("div");
    var clickDiv=document.createElement("div");
    var canvas=document.createElement("canvas");
    var ctx=canvas.getContext("2d");
    var ctop=0,cleft=0;
    var defaults={
        color:["#6A5ACD","#4682B4","#EEB4B4","#FAEBD7","#4EEE94","#63B8FF","#8B658B","#76EEC6","#97FFFF","#BBFFFF","#D1EEEE"],
        data:["5","8","29","15","20","40"],
        angel:[],
        sum:0
    }

    canvas.addEventListener("mouseleave",function(e){
         myDiv.style.display="none";
        // clickDiv.style.display="none";
        },false);
    canvas.addEventListener("mouseout",function(e){
         myDiv.style.display="none";
        // clickDiv.style.display="none";
        },false);
    var pieEffect=function(ele,options){
        if(options==null||typeof(options)=="undefined")
             options={};
        this.paintDiv();
        canvas.width=ele[0].clientWidth;
        canvas.height=ele[0].clientHeight;
        ele[0].appendChild(canvas)
        ctop=ele[0].offsetTop;
        cleft=ele[0].offsetLeft;
        defaults=$.extend({},defaults,options)
        this.getSum();
        this.drew();

    }
    pieEffect.prototype={
        getSum:function(){
                for(var i=0;i<defaults.data.length;i++){
                 defaults.sum+=parseInt(defaults.data[i]);
               }

        },
        paintDiv:function(){
            myDiv.style.height=80+"px";
            myDiv.style.width=100+"px";
            myDiv.style.display="none";
            myDiv.style.backgroundColor="#F0FFF0"
            myDiv.style.borderRadius ="5px"
            myDiv.style.opacity="0.8"
            myDiv.style.float="left";
            myDiv.style.position="absolute";
            myDiv.style.border="1px solid #3d8cdb";
            document.body.appendChild(myDiv);
            clickDiv.style.height=180+"px";
            clickDiv.style.width=220+"px";
            clickDiv.style.display="none";
            clickDiv.style.backgroundColor="#F0FFF0"
            clickDiv.style.borderRadius ="5px"
            clickDiv.style.opacity="0.8"
            clickDiv.style.float="left";
            clickDiv.style.position="absolute";
            clickDiv.style.border="1px solid #3d8cdb";
            var a= document.createElement("a");
            a.style.color="blue";
        //    a.style.marginLeft="200px";
            $(a).attr("href","javascript:void(0)");
            $(a).css("position","absolute").css("top","0").css("right","0")
            a.innerText="关闭";
            $(a).attr(‘title‘,"关闭");
            $(a).attr(‘onclick‘,"$(this).parent().css(‘display‘,‘none‘)");

            var title=document.createElement("div");
            $(title).css("background-color","#DCDCDC");
            $(title).css("position","absolute").css("top","0").css("width","220px").css("height","20px");
            title.innerText="我的自定义窗口";
            title.style.opacity="0.6";
            clickDiv.appendChild(title);
            clickDiv.appendChild(a);
            var cdiv=document.createElement("div");
            clickDiv.appendChild(cdiv);
            document.body.appendChild(clickDiv);

        },
        drew:function(p,flag){
            var begin=end=0;
           for(var i=0;i<defaults.data.length;i++){
            //画一个半角
             ctx.beginPath();
             if(i>5){
                 defaults.color.push(bgColor())
             }
             ctx.fillStyle=defaults.color[i];
             ctx.strokeStyle="#FFFFFF";
             ctx.moveTo(200,200);
             defaults.angel.push((parseFloat(defaults.data[i])/defaults.sum)*Math.PI*2)
             begin=end;
             end=defaults.angel[i]+begin;
             ctx.arc(200,200,120,begin,end,false);
             ctx.lineTo(200,200);
             ctx.stroke();
             ctx.fill();
             if(p && ctx.isPointInPath(p.x, p.y)){
          //如果传入了事件坐标,就用isPointInPath判断一下
            //如果当前环境覆盖了该坐标,就将当前环境的index值放到数组里
           //  $("#myDiv").css("left",p.x+left);
           //  $("#myDiv").css("top",p.y+top);
           //  $("#myDiv").css("display","block");
                var mLeft=cleft+p.x;
                var mTop=ctop+p.y;
               //点击事件
              if(flag){

                  clickDiv.style.marginLeft=mLeft-100+"px";
               clickDiv.style.marginTop=mTop-100+"px";
               clickDiv.style.display="block";
               clickDiv.style.position="absolute";
               clickDiv.style.border="1px solid "+defaults.color[i];
               clickDiv.childNodes[2].innerHTML="<br>当前数值:<br>"+defaults.data[i]+"<br>颜色:<br>"+defaults.color[i];

                }
                else{

                myDiv.style.height=80+"px";
                myDiv.style.width=100+"px";
                myDiv.style.marginLeft=mLeft+"px";
                myDiv.style.marginTop=mTop+"px";
                myDiv.style.display="block";
                myDiv.style.position="absolute";
                myDiv.style.border="1px solid "+defaults.color[i];
                myDiv.innerHTML="数值:<br>"+defaults.data[i]+"<br>颜色:<br>"+defaults.color[i];
                }
             }
            ctx.closePath();
         }
        }
    }
    function closeDiv(){
         clickDiv.style.display="none";
    }
    function bgColor(){
             return  ‘#‘+(‘00000‘+(Math.random()*0x1000000<<0).toString(16)).substr(-6);
         }

     function bgColor2(){
             var r=Math.floor(Math.random()*256);
             var g=Math.floor(Math.random()*256);
             var b=Math.floor(Math.random()*256);
             return "rgb("+r+‘,‘+g+‘,‘+b+")";//所有方法的拼接都可以用ES6新特性`其他字符串{$变量名}`替换
         }
    function getEventPosition(ev){
    var x, y;
    if (ev.layerX || ev.layerX == 0) {
    x = ev.layerX;
    y = ev.layerY;
    } else if (ev.offsetX || ev.offsetX == 0) { // Opera
    x = ev.offsetX;
    y = ev.offsetY;
    }
  return {x: x, y: y};
}
})(jQuery)

注:由于canvas是针对帧数的 特别是实现了鼠标上浮及点击事件 对于性能的要求会有点高.

github:https://github.com/x0216u/PieChart

时间: 2024-10-06 17:40:16

canvas 模仿highcharts自制饼图插件的相关文章

饼图----插件

(function( w ) { // 角度转换为弧度 function angleToRadian( angle ) { return Math.PI / 180 * angle; } /* * constructor { PipeChart } 饼图构造函数 * param { ctx: Context } 绘图上下文 * param { data: Array } 绘制饼图所需的数据 * param { x: number } 圆心x坐标 * param { y: number } 圆心y

highcharts java饼图

自学highcharts饼图,springMVC框架,后台java,mysql数据库,官网下载Highcharts,留待以后备用 jsp页面代码: <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getS

jQuery模仿人类打字效果插件typetype

typetype是一款模仿人类打字效果的jQuery插件,typetype非常轻巧,文件不到2K,gzipped压缩后只有578字节,但模仿的效果非常逼真,一字一字的顿出和回删效果,让人惊叹不止,喜欢的朋友研究下吧,下面来看下它的使用方法: 引入核心文件 1 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 2 <script type="text/j

Highcharts 3D柱形图;Highcharts 堆叠3D柱形图;Highcharts 3D饼图;Highcharts 3D圆环图

Highcharts 3D柱形图 配置 chart.options3d 配置 以下列出了 3D 图的基本配置,设置 chart 的 type 属性为 column,options3d 选项可设置三维效果. var chart = { type: 'column', options3d: { enabled: true, //显示图表是否设置为3D, 我们将其设置为 true alpha: 15, //图表视图旋转角度 beta: 15, //图表视图旋转角度 depth: 50, //图表的合计

Highcharts+Spring饼图使用实例

项目上要用到Hightcharts展示平台机器占用情况,使用这类第三方插件很方便就能实现 JSP: <script type="text/javascript" src="<%=basePath%>/resources/thirdparty/highcharts/highcharts.js"></script> <div id="machineRate" title="按产品线统计机器占比&qu

Html5添加Canvas的EAN13条形码生成插件教程

一.使用方法 如果你需要将该EAN13条形码插件作为jQuery插件来使用,那么需要在页面中引入jQuery和jquery-ean13.min.js文件. <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="dist/jquery-ean13.min.js&qu

用canvas模仿iPhone时钟

自学前段开发也有一个月了,最近在学html5中的新标签“canvas”,发现canvas不仅仅是一个标签,更是一个能够制作动画效果的画布,于是模仿iPhone中时钟的效果,自己做了一个网页版的时钟,还只是一个雏形,以后还会增加一些自己的创意“抛弃圆形表盘”,“数字用图片或其它形状呈现”,“时针.分钟.秒针也用其它形状代替”,以我现在的基础也许还没有能力做出来,不过我会努力的. <!DOCTYPE html><html><head lang="en">

Highcharts之饼图

1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 6 <title>Highcharts饼图举例</title> 7 <style type="text/css"></style> 8 &

自制Xcode插件——XcodeCareer:统计亲手输入代码行数和时长

自制了一个简单的Xcode插件.主要功能是统计自安装插件以后,用户手动输入的代码行数,以及累计敲代码的时间.通过快捷键Shift + P查看累计数据. 已分享至我的Github:XcodeCareer 欢迎各位大神一起来完善项目. 统计规则简单的说明如下: 1.创建工程或者创建文件时,系统已经生成的代码不算. 2.直接复制第三方框架进项目(Add New File)时,复制进来的代码不算. 3.任何一次回车键换行会使累计代码量增加一行.退格键删除一行会使累计代码量减少一行. 4.五秒钟不写代码后