canvas+js实现动态饼图效果

canvas+js实现动态饼图效果

参考了一些网上的例子，利用canvas+js实现动态饼图效果demo，包括鼠标移入图块颜色变化以及带有tooltip提示。实现逻辑可分为三个步骤：

1、首先利用canvas画布原理画饼图。
2、添加鼠标移入监听事件，获取鼠标当前坐标。
3、判断当前鼠标坐标是否在所画饼图扇形区域，改变饼图颜色和显示tooltip提示。

1、画饼图

利用canvas实现一个饼图效果，我们首先需要知道canvas画布画图原理以及相关需要的API。
W3school这样介绍canvas，还不太了解的朋友可以先去熟悉熟悉。

什么是 Canvas？
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

创建 Canvas 元素
向 HTML5 页面添加 canvas 元素。
规定元素的 id、宽度和高度：

  <canvas id="myCanvas" width="200" height="100"></canvas>

通过上面的介绍，即画图的html部分我们已经了解，只需要定义一个带有宽高及id的canvas即可，接下来便是通过js来绘制图形，首先我们需要利用id来寻找canvas元素。

let el = document.getElementById("myCanvas");

然后创建画布的绘制对象：

let cxt = el.getContext("2d"); 

接下来，即可利用canvas的相关API来绘制我们需要的图像，canvas的API可参考《HTML Canvas 参考手册》。本次画饼图设计需要的API整理如下：

ctx.beginPath(); // 起始一条路径，或重置当前路径
ctx.fillStyle; // 设置或返回用于填充绘画的颜色、渐变或模式 ctx.moveTo(x, y); // 把路径移动到画布中的指定点，不创建线条
ctx.arc(x, y, radius, sAngle, eAngle, false); // 创建弧/曲线（用于创建圆形或部分圆）
ctx.fill(); // 填充当前绘图（路径）

以上只列出了几个化饼图的关键API，其他包括饼图具体实现、小图标以及文字的相关API详细参见下面的代码。

2、添加鼠标监听

利用js的addEventListener，添加所绘画布鼠标监听，获取当前鼠标移入的坐标。

// 鼠标位置监听
getPosition(element) {
   
    let mouseTimer = null;
    element.addEventListener('mousemove', (e) => {
   
        e = e || window.event;
        if ( e.ofSfsetX || e.offsetX==0 ) {
   
            this.mousePosition.x = e.offsetX;
            this.mousePosition.y = e.offsetY;
        } else if ( e.layerX || e.layerX==0 ){
   
            this.mousePosition.x = e.layerX;
            this.mousePosition.y = e.layerY;
        } 

        // 监听tooltip显示
        let el =  document.getElementById('self-tooltip');
        el.style.visibility = 'hidden';
        
        clearTimeout(mouseTimer);
        mouseTimer = setTimeout(() => {
   
            this.drawPie(element, this.pieData);
        }, 50)