hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - HTML - 正文 请牢记本站网址www.sosophp.cn

canvas绘制饼图的要领引见(代码)【html5教程】

2019-11-26HTML搜搜PHP网48°c
A+ A-
本篇文章给人人带来的内容是关于canvas绘制饼图的要领引见(代码),有肯定的参考价值,有须要的朋侪能够参考一下,愿望对你有所协助。

一. 任务说明

运用原生canvasAPI绘制饼图(南丁格尔玫瑰)。(截图以及数据来自于百度Echarts官方示例库【检察示例链接】)。

二. 重点提醒

南丁格尔玫瑰图的画法有很多种,Echarts中供应的以半径或面积两种差别形式,本文中以面积比例画法为例,绘制算法以下:

  1. 肯定每一个扇区的角度。因为一切扇区的角度加在一起为2π ,我们先按照数据比例来盘算角度:

  1. 每一个扇区面积与总面积之间的比例即为数值的比,将给定参数数组options.radius中的最大和最小数值作为数值最大的一块扇形的画图数据,代入以下公式即可求得总面积S

  1. 再利用上述公式离别盘算出每一个扇形对应的外圆半径,在canvas中绘制途径并添补即可。

三. 示例代码

南丁格尔玫瑰图绘制示例代码:

//绘制饼图
drawPieChart(options);
    
/**
 * 绘制饼图
 * @param  {[type]} options [description]
 * @return {[type]}         [description]
 */
function drawPieChart(options) {
   //纪录最大数值以反求面积总和
   options.maxValue = 0;
   //求数据集总和以在后续盘算每一个扇形的角度比例
   options.totalNum = options.data.reduce((pre,cur)=>{
     if (cur.value > options.maxValue) {
         options.maxValue = cur.value;
     }
     return pre+cur.value;
   },0);
    /*以最大值对应最大半径来盘算面积总和,并掩盖原值
    *使得最大的一块扇形外圆半径为options.radius[0]
    *内圆半径为options.radius[1]
    */
    let Rmin = options.radius[0];
    let Rmax = options.radius[1];
    let r = Math.sqrt((Rmax*Rmax - Rmin*Rmin)*options.totalNum / options.maxValue + Rmin*Rmin);
    options.radius[1] = r;
    //挪动坐标系原点至画图中间
   let paintingCenter={
     x:parseInt(options.center[0],10)/100 * (options.chartZone[2] - options.chartZone[0]) + options.chartZone[0],
     y:parseInt(options.center[1],10)/100 * (options.chartZone[3] - options.chartZone[1]) + options.chartZone[1]
   }
   context.translate(paintingCenter.x, paintingCenter.y);
    //绘制每一个扇形,过程当中累加扭转角度
   let allAngle = options.data.reduce((prev,cur,index)=>{
       context.fillStyle = options.colorPool[index]
       let angle = calcPaintingData(cur,options);
       return prev + angle;
   },0);
   //绘制中空白色圆
   context.beginPath();
   context.fillStyle = 'white';
   context.arc(0,0,options.radius[0],0,2*Math.PI,false);
   context.fill();
}

/**
 * 盘算每一个扇形所须要的画图参数
 */
function calcPaintingData(data,options) {
    let scale = data.value / options.totalNum; 
    let angle = scale * 2 * Math.PI;
    let Rmin = options.radius[0];
    let Rmax = options.radius[1];
    let r = Math.sqrt(scale * (Rmax*Rmax - Rmin*Rmin) + Rmin*Rmin);
    data.r = r;
    //绘制扇形
    paintFan({
        r:r,
        angle:angle,
        data:data,
        options:options
    });
    return angle;//将角度值返回给外层函数以供累加
}

//绘制扇形
function paintFan(opt) {
    context.beginPath();
    context.lineTo(opt.r,0);
    context.arc(0,0,opt.r,0,opt.angle,false);
    context.lineTo(0,0);
    context.closePath();
    context.fill();
    context.rotate(opt.angle);
}

浏览器中可检察结果:

四. hover高亮的完成思绪

  1. 画图过程当中,将每一个扇区的画图数据(半径,相对于圆心的肇端转角,扇区角度)均挂载在画图数据上。
  2. canvas标签上监听鼠标挪动事宜mousemove,并在回调函数中将鼠标挪动事宜event.clientXevent.clientY转换为相对于canvas坐标的数值(mouseX,mouseY)
  3. 从圆心坐标(paintingCenter.x,paintingCenter.y)(mouseX,mouseY)衔接为向量,依据该向量的角度和模即可推断鼠标是不是处于某个扇区之上。
  4. 假如处于扇区之上,则以过渡动画来绘制关键帧使得hover结果表现出来。先修正context.fillStyle色彩为对应扇区的高亮色,然后让外圆画图半径以线性的体式格局逐帧增添至目的大小(比方10%),每一帧中运用canvas画图上下文从新对画图地区举行关闭画线,然后添补即可。
  5. hover结果出现时绘制高亮色的画图地区,hover结果消失机从外圆最先逐帧绘制白色外层扇区即可,终究再将数据扇区绘制为原色。

【相干引荐:HTML5视频教程】

以上就是canvas绘制饼图的要领引见(代码)的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
canvas绘制饼图的要领引见(代码)【html5教程】

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签: