캔버스를 활용한 파이차트 그리는 방법 소개(코드)

이 글은 캔버스(코드)에 파이 차트를 그리는 방법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. 작업 설명

기본 canvasAPI를 사용하여 원형 차트(Nightingale Rose)를 그립니다. (스크린샷과 데이터는 Baidu Echarts 공식 샘플 라이브러리에서 가져왔습니다. [샘플 링크 보기]) 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.clientX和event.clientY转换为相对于canvas坐标的数值(mouseX,mouseY)。
3. 从圆心坐标(paintingCenter.x,paintingCenter.y)到(mouseX,mouseY)连接为向量，根据该向量的角度和模即可判断鼠标是否处于某个扇区之上。
4. 如果处于扇区之上，则以过渡动画来绘制关键帧使得hover效果表现出来。先修改context.fillStyle


5. II. 중요 팁

   나이팅게일 장미 차트를 그리는 방법은 다양합니다. Echarts는 반경 또는 영역이라는 두 가지 모드를 제공합니다. 이 문서에서는 그리기 알고리즘을 예로 사용합니다.
각 섹터의 각도를 결정합니다. 모든 섹터의 각도를 더하면 2π가 되므로 먼저 데이터 비율에 따라 각도를 계산합니다.

각 섹터의 면적과 전체 면적의 비율이 해당 값의 비율입니다. 주어진 매개변수 배열 options.radius 수치가 가장 큰 섹터의 도면 데이터로, 다음 공식을 대입하면 전체 면적 <code>S를 구할 수 있습니다: 🎜🎜🎜🎜
🎜위 공식을 사용하여 각 섹터의 해당 외부 원 반경을 계산하고 캔버스에 경로를 그리고 채웁니다. 그것. 🎜🎜

3. 샘플 코드🎜🎜나이팅게일 장미 다이어그램 그리기 샘플 코드:🎜rrreee🎜효과는 브라우저에서 볼 수 있습니다: 🎜 🎜🎜

4. 호버 하이라이팅 구현 아이디어🎜

🎜그리기 과정에서 각 섹터의 드로잉 데이터(반경, 원 중심을 기준으로 한 시작 각도, 섹터 각도) )이 도면 데이터에 마운트됩니다. 🎜🎜 canvas 태그에서 마우스 움직임 이벤트 mousemove를 듣고 마우스 움직임 이벤트 event.clientX 및 event를 콜백 함수 .clientY는 캔버스 좌표를 기준으로 숫자 값 (mouseX,mouseY)로 변환됩니다. 🎜🎜원 (paintingCenter. 특정 섹터의 중심점에서 좌표를 연결합니다. 🎜🎜섹터 위에 있으면 전환 애니메이션으로 키프레임이 그려져 호버 효과가 나타납니다. 먼저 <code>context.fillStyle 색상을 해당 섹터의 강조 색상으로 수정한 다음 프레임별로 선형 방식으로 외부 원 그리기 반경을 대상 크기(예: 10%)로 늘립니다. 각 프레임에서 캔버스 그리기를 사용합니다. 컨텍스트는 그리기 영역을 다시 둘러싸고 선을 그린 다음 채웁니다. 🎜🎜🎜호버 효과가 나타나면 강조된 색상 그리기 영역을 그립니다. 호버 효과가 사라지면 외부 원부터 시작하여 흰색 외부 섹터를 프레임별로 그리고 마지막으로 데이터 섹터를 기본 색상으로 그립니다. 🎜🎜🎜🎜【관련 추천: 🎜HTML5 비디오 튜토리얼🎜】🎜

위 내용은 캔버스를 활용한 파이차트 그리는 방법 소개(코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!