canvas绘制圆角环形图

所属分类:图表相关

 5911次|    18次   点击收藏(2)

canvas绘制圆角环形图

前言

百度echart中并没有圆角环形图,highchart的圆角环形图和项目中的有些出入,因此,写了一个,在这里分享一下

示例图片

示例图片

参数

 * @param {type} radius 圆环半径
 * @param {type} lineWidth 圆环宽度
 * @param {type} strokeStyle 默认背景
 * @param {type} fillStyleArray 数组,圆环色块颜色
 * @param {type} capType 类型:round是圆角,square正方形顶帽,butt是正常
 * @returns {Circle} 

使用方法

 var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');
            var ring = new Ring("80", "25", "#ccc", ["#a1b91d", "#e9636a", "#e7ba21"], "round");
            ring.drawRing(ctx, 2 * Math.PI / 3, [20, 50, 30]);
关于前端资源库

前端资源库是haorooms博主平时积累的前端资源,大部分来源于互联网。但经过博主调试和加工,集聚了博主的心血。

因此,资源库所有资源,仅供学习和参考,切勿下载下来用于商业用途或者转卖。转载请注明来自haorooms博客资源库!

联系方式
关键词搜索