Introduction to the method of drawing pie chart with canvas (code)

This article brings you an introduction to the method of drawing a pie chart on canvas (code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. Task Description

Use the native canvasAPI to draw a pie chart (Nightingale Rose). (Screenshots and data come from Baidu Echarts official sample library [View sample link]).

2. Key Tips

There are many ways to draw Nightingale’s rose diagram. The radius provided in Echarts Or area, two different modes. In this article, the area proportional drawing method is used as an example. The drawing algorithm is as follows:

1. Determine the angle of each sector. Since the angles of all sectors add up to 2π, we first calculate the angle according to the data ratio:

1. The area of ​​each sector and the total area The ratio between them is the ratio of values. The maximum and minimum values ​​in the given parameter array options.radius are used as the drawing data of the sector with the largest value. Substitute into the following formula to obtain the total areaS：

1. Use the above formula to calculate the outer circle radius corresponding to each sector, draw the path in canvas and Just fill it.

3. Sample code

Nightingale rose diagram drawing sample code:

//绘制饼图
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);
}

The effect can be viewed in the browser:

4. The implementation idea of ​​hover highlighting

1. During the drawing process, the drawing data of each sector (radius, starting angle relative to the center of the circle, sector angle) are mounted on the drawing data.
2. Listen to the mouse movement event mousemove on the canvas tag, and pass the mouse movement event event.clientX and in the callback function event.clientYConvert to a numerical value relative to canvas coordinates(mouseX,mouseY).
3. Connect the circle center coordinates (paintingCenter.x,paintingCenter.y) to (mouseX,mouseY) as a vector, which can be determined based on the angle and module of the vector Whether the mouse is over a sector.
4. If it is above the sector, the keyframe will be drawn with transition animation to make the hover effect appear. First modify the context.fillStyle color to the highlight color of the corresponding sector, and then increase the outer circle drawing radius to the target size (for example, 10%) in a linear manner frame by frame, using the canvas drawing context in each frame Just re-enclose the drawing area and then fill it.

5. When the hover effect appears, draw the highlighted color drawing area. When the hover effect disappears, just draw the white outer sectors frame by frame starting from the outer circle, and finally draw the data sectors into the original color.

【Related recommendations: HTML5 video tutorial】

The above is the detailed content of Introduction to the method of drawing pie chart with canvas (code). For more information, please follow other related articles on the PHP Chinese website!