介绍//绘制饼图
drawPieChart(选项);/* *
*绘制饼图
* @param{[型]}选项(描述)
* @return{[型]}[描述]
*/函数drawPieChart(选项){//记录最大数值以反求面积总和
选项。maxValue=0;//求数据集总和以在后续计算每个扇形的角度比例
选项。totalNum=options.data.reduce ((pre cur)=祝辞{
如果(cur.value比;options.maxValue) {
选项。maxValue=cur.value;
}
返回前+ cur.value;
},0);/*以最大值对应最大半径来计算面积总和,并覆盖原值
*使得最大的一块扇形外圆半径为options.radius [0]
*内圆半径为options.radius [1]
*/让Rmin=options.radius [0];
我们征求=options.radius [1];
让r=数学。√(征求*征求- Rmin * Rmin) *选项。totalNum/选项。maxValue + Rmin * Rmin);
选项。半径[1]=r;//移动坐标系原点至绘图中心
让paintingCenter={
x:方法(options.center[0], 10)/100 *(选项。chartZone [2]——options.chartZone [0]) + options.chartZone [0],
y:方法(options.center[1], 10)/100 *(选项。chartZone [3]——options.chartZone [1]) + options.chartZone [1]
}
context.translate (paintingCenter。x, paintingCenter.y);//绘制每个扇形,过程中累加旋转角度
让allAngle=options.data.reduce((上一页,坏蛋、索引)=祝辞{
上下文。fillStyle=options.colorPool(指数)
让角=calcPaintingData (cur,选项);
返回上一页+角;
},0);//绘制中空白色圆
context.beginPath ();
上下文。fillStyle=& # 39;白色# 39;;
context.arc (0, 0, options.radius [0], 0, 2 * Math.PI,假);
context.fill ();
}/* *
*计算每个扇形所需要的绘图参数
*/函数calcPaintingData(数据、选择){
让规模=数据。价值/options.totalNum;
让角=* 2 * Math.PI规模;
让Rmin=options.radius [0];
我们征求=options.radius [1];
让r=数学。√规模*(征求*征求- Rmin * Rmin) + Rmin * Rmin);
数据。r=r;//绘制扇形
paintFan ({
r:,
角:角,
数据:数据,
选项:选项
});
返回角;//将角度值返回给外层函数以供累加
}//绘制扇形
函数paintFan(选择){
context.beginPath ();
context.lineTo (opt.r 0);
opt.r context.arc (0, 0, 0, opt.angle,假);
context.lineTo (0,0);
context.closePath ();
context.fill ();
context.rotate (opt.angle);
}
小编给大家分享一下帆布如何绘制饼图,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
使用原生<代码> canvasAPI 绘制饼图(南丁格尔玫瑰)。(截图以及数据来自于百度Echarts官方示例库【查看示例链接】)。
三。示例代码
南丁格尔玫瑰图绘制示例代码:
浏览器中可查看效果:
