首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >canvas绘制扇形统计图,50行代码的统计图

canvas绘制扇形统计图,50行代码的统计图

作者头像
Javanx
发布2019-09-04 15:27:44
1.9K0
发布2019-09-04 15:27:44
举报
文章被收录于专栏:web秀web秀

前言

网上统计图插件非常多,比如EchartsChart.js等,但是如果你要的是功能简单,单一的统计图,应用这些就会很浪费,也增加自身体积,如果你想要简单的扇形统计图,请看过来!

HTML主体

<div class="box">
    <ul>
        <li>
            <canvas id="one" width="200" height="200"></canvas>
        </li>
        <li>
            <canvas id="two" width="200" height="200"></canvas>
        </li>
        <li>
            <canvas id="three" width="200" height="200"></canvas>
        </li>
    </ul>
</div>

JavaScript

function drawCircle(_options){
    var options = _options || {}; // 获取或定义options对象;
    options.angle = options.angle || 1; // 定义默认角度1为360度(角度范围 0-1);
    options.color = options.color || '#fff'; // 定义默认颜色(包括字体和边框颜色);
    options.lineWidth = options.lineWidth || 10; // 定义默认圆描边的宽度;
    options.lineCap = options.lineCap || 'square'; // 定义描边的样式,默认为直角边,round 为圆角
    options.bgLine = options.bgLine || '#ccc';

    var oBoxOne = document.getElementById(options.id);
    var sCenter = oBoxOne.width / 2; // 获取canvas元素的中心点;
    var ctx = oBoxOne.getContext('2d');
    var nBegin = Math.PI / 2; // 定义起始角度;
    var nEnd = Math.PI * 2; // 定义结束角度;

    // grd定义为描边渐变样式
    var grd = ctx.createLinearGradient(0, 0, oBoxOne.width, 0);
    grd.addColorStop(0, '#49b1f5'); // 开始颜色
    grd.addColorStop(0.5, '#10af7e'); // 50%时的颜色
    grd.addColorStop(1, 'red'); // 结束时的颜色

    ctx.textAlign = 'center'; // 定义字体居中;
    ctx.font = 'normal normal bold 20px Arial'; // 定义字体加粗大小字体样式;
    ctx.fillStyle = options.color == 'grd' ? grd : options.color; // 判断文字填充样式为颜色,还是渐变色;
    ctx.fillText((options.angle * 100) + '%', sCenter, sCenter); // 设置填充文字;

    // ctx.strokeStyle = grd; // 设置描边样式为渐变色;
    // ctx.strokeText((options.angle * 100) + '%', sCenter, sCenter); // 设置描边文字(即镂空文字);

    ctx.lineCap = options.lineCap; // 设置描边的样式
    ctx.strokeStyle = options.color == 'grd' ? grd : options.color; // 设置颜色
    ctx.lineWidth = options.lineWidth; // 设置宽度

    ctx.beginPath(); // 设置起始路径,这段绘制360度背景;
    ctx.strokeStyle = options.bgLine; // 设置背景颜色
    ctx.arc(sCenter, sCenter, (sCenter - options.lineWidth), -nBegin, nEnd, false);
    ctx.stroke();

    var imd = ctx.getImageData(0, 0, 240, 240);
    function draw(current) { // 该函数实现角度绘制;
        ctx.putImageData(imd, 0, 0);
        ctx.beginPath();
        ctx.strokeStyle = options.color == 'grd' ? grd : options.color;
        ctx.arc(sCenter, sCenter, (sCenter - options.lineWidth), -nBegin, (nEnd * current) - nBegin, false);
        ctx.stroke();
    }

    var t = 0;
    var timer = null;
    function loadCanvas(angle) { // 该函数循环绘制指定角度,实现加载动画;
        timer = setInterval(function(){
            if (t > angle) {
                draw(options.angle);
                clearInterval(timer);
            }else{
                draw(t);
                t += 0.01;
            }
        }, 20);
    }
    loadCanvas(options.angle); // 载入百度比角度  0-1 范围;
    timer = null;
}

调用方法

// 示例一
drawCircle({
    id: 'one', // dom元素
    color: '#10af7e', // 颜色
    bgLine: '#e4e4e4', // 背景颜色
    angle: 0.5, // 所占比例
    lineWidth: 15, // 宽度(像素)
    lineCap: 'round' // 描边的样式
});
// 示例二
drawCircle({
    id: 'two',
    angle: 0.75,
    color: '#49b1f5',
    bgLine: '#f3766f',
    lineWidth: 20
});
// 示例三
drawCircle({
    id: 'three',
    angle: 1,
    lineWidth: 25,
    color: 'grd'
});

CSS

这里的css主要是用来示例页面布局的,可以直接忽略

.box ul, .box li {
    list-style: none;
    margin: 0;
    padding: 0;
}
.box ul li {
    float: left;
    width: 33%;
    text-align: center;
}

演示程序:演示代码 下载源码:下载源码

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018年7月31日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • HTML主体
  • JavaScript
  • CSS
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档