canvas学习之饼状图

接着上一节说,这次我使用canvas绘制了饼状图,主要是SectorGraph.js,

引入

import {canvasPoint} from '../../assets/js/canvas';
import {basicInfo,histogramMousemoveEvent} from '../../assets/js/SectorGraph';

使用方法:

function histogramCreate(width,point){
　　var canvas=document.getElementById('myCanvas');
　　if(!!width){
　　if(width > 758)
　　canvas.width = width;
　　}else{
　　var canvasWidth = document.getElementById('histogramPanel');
　　if(canvasWidth.offsetWidth > 758)
　　canvas.width = canvasWidth.offsetWidth;0
　　}
　　addHistogramMousemove(canvas);
　　var ctx=canvas.getContext('2d');
　　ctx.clearRect(0,0,canvas.width,canvas.height);
　　//绘制饼状图
　　basicInfo(ctx,[{num:20,name:"0001",color:"red"},
　　{num:20,name:"0002",color:"black"},
　　{num:20,name:"0003",color:"yellow"},
　　{num:20,name:"0004",color:"gray"},
　　{num:12,name:"0005",color:"pink"},
　　{num:42,name:"0006",color:"blue"},
　　{num:2,name:"0007",color:"green"}
]);
}

SectorGraph.js介绍:

我感觉注释写的很细了,所以具体细节我就不说额,只是把我的思路说一下,用户给到数据后,我会计算每一个数据里面的数量占总数量的百分比,这样就拿到了度数,用户绘制饼状图,然后需要给每一个饼状图添加备注信息,这个我的思路是分左边备注和右边备注,取每个饼的中心点作为开始点,然后把开始点进行排序,用贝塞尔曲线连接每一个开始点和备注点,还有一个问题就是每次用户鼠标进入的时候的效果,我会存储每个饼的位置,当鼠标滑动时时候,我会判断点是否在饼中,并获得在哪一个饼中,然后重绘。