用HTML5中的画布（Canvas）在“圳品”信息系统网页上绘制显示饼图

秒速五厘米 2024-03-25 21:45 71阅读 0赞

继续编写“圳品”信息系统，除了要列出圳品清单，还需要做进一步的数据分析，比如按“圳品”所在区域进行统计和展示，这个之前已经实现（参见：[在网页地图图片上加注企业和“圳品”数量信息][Link 1]），现在还需要对“圳品” 按类别进行统计和展示。为了让数据对比一目了然，我们打算用饼图来展示。

要在网页上绘制显示饼状图，有很多现成的库，比如 Echarts等，但我们想用HTML5中的 画布（Canvas）来自己画，这个在网上有很多的演示代码，拿来根据我们的需要进行修改。

我们首先定义一个“圳品”类别数组aType，如下：

const aType = [
        "水果",//0
        "粮食",//1,谷类、豆类、薯类
        "食用油",//2
        "饮用水",//3
        "畜类",//4
        "禽类",//5
        "渔类",//6
        "其它"//7
        ];

包括水果、粮食、食用油、饮用水、畜、禽、渔、其它 8类。

再将“圳品”类别统计结果保存到数组aTypeCount ，如下：

//结构：类别，数量，颜色
        var aTypeCount = [
        [0, 3, "purple"],
        [1, 5, "gray"],
        [2,3, 'yellow'],
        [3,4,"green"],
        [4,8,"red"]
        ];

接下来我们定义Pie对象，并提供init、render、和drawText三个方法，分别实现数据初始化、渲染页面（画饼图）和输出文字说明。

然后把数组aTypeCount 的数据传递给Pie对象来绘制饼图。

完整的代码如下：

<!DOCTYPE html>
    <html>
     <head>
      <meta charset="UTF-8">
      <meta name="Author" content="PurpleEndurer">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <title>“圳品”信息系统</title>
     </head>
     <body>
     <script>
          const aType = [
        "水果",//0
        "粮食",//1,谷类、豆类、薯类
        "食用油",//2
        "饮用水",//3
        "畜",//4
        "禽",//5
        "渔",//6
        "其它"//7
        ];
    
        //结构：
        //类别，数量，颜色
        var aTypeCount = [
        [0, 3, "purple"],
        [1, 5, "gray"],
        [2,3, 'yellow'],
        [3,4,"green"],
        [4,8,"red"]
        ]; 
      </script> 
     <canvas id="typeCountCanvas" style="border:1px solid red"></canvas>
     <div>
     <textarea border="1" id="taDebug" cols="80" rows="15">debug：</textarea>
     </div>
    
     <script>
        var tcCanvas = document.getElementById("typeCountCanvas");
        //var w = window.innerWidth;
        //var h = window.innerHeight;
        tcCanvas.height = 480;
        tcCanvas.width = 640;
        var ctx = tcCanvas.getContext('2d');
    
        var taDbg = document.getElementById("taDebug");
    
      function Pie(obj)
      {
    
        for(var key in obj)
        {
          this[key] = obj[key];
        }
        this.init();
        this.render(this.slice);
        this.drawText();
      }
    
      Pie.prototype = {
        init: function () {
         this.start = 0; 
          //1、累计数据求合
          var sum = 0;
          this.data.forEach(function (v) {
            sum += v[1];
          });
          //2、计算每一个数据所占的比重
          this.slice = this.data.map(function (v) {
            var obj = {};
            obj.number = v[1];
            obj.ratio = v[1] / sum;//每个数据占据的比重
            obj.radian = 2 * Math.PI * v[1] / sum;//该扇形所占据的弧度
            obj.start = this.start;
            obj.end = this.start + obj.radian;
            this.start = obj.end;
            obj.color = v[2];
            obj.text = aType[v[0]] + "类"+ v[1] + "个，占比" + Math.ceil(obj.ratio*100) + "%";
            return obj;
          },this);
        },
      
        //渲染页面（画饼图）
        render: function (obj) {
          //3、计算每一个扇形的起始弧度和结束弧度
          this.slice.forEach(function (v, i) {
            var obj = {};
            //第一个扇形的起始弧度：start 结束：start+第一个扇形占据的弧度差
            obj.start = this.start;
            obj.end = this.start + v.radian;
            this.start += v.radian;
            //绘制扇形
            this.ctx.beginPath();
            this.ctx.moveTo(this.x, this.y);
            this.ctx.arc(this.x, this.y, this.r, obj.start, obj.end);
            this.ctx.fillStyle = v.color;
            this.ctx.fill();
          }, this);
        },
    
        //输出文字说明
        drawText:function(){
          var fontSize= 16;
          this.ctx.font = fontSize+"px 微软雅黑";
          this.slice.forEach(function(obj){
          this.ctx.fillStyle = 'black';
    
            //计算文字所在的弧度
            r2 = obj.start + obj.radian/2;
    
            //计算相对于圆心文字偏移的位置
            b = this.r * Math.cos(r2) ;
            h = this.r * Math.sin(r2);
    
            //文字的x坐标位置
         var x2 = this.x + b;
            if (x2 <= this.x)
            {
                //在圆心的左侧
                x2 = 10;
            }
    
            //文字的y坐标位置
            var y2 = this.y + h;
            if (y2 >= this.y)
            {
                y2 += fontSize; 
            }
            else
            {
                //在圆心的上方
                y2 -= fontSize/2;
            }
    
            this.ctx.fillText(obj.text, x2, y2);//在一行输出
            taDbg.value += "\nthis.r=" + this.r + "  obj.text= " + obj.text + " x2=" + x2 + " y2=" + y2;
          },this);
        }
      };
    
     var typeCountPie = new Pie({
        ctx: ctx,
        x: tcCanvas.width / 2,
        y: tcCanvas.height / 2,
        r: 150,
        data:aTypeCount
      });
    
     </script>
     </body>
    </html>

显示效果截图如下：

![6881515705b8c73b65fede5040f32d5f.jpeg][]

[Link 1]: https://blog.csdn.net/Purpleendurer/article/details/128884614?spm=1001.2014.3001.5501
[6881515705b8c73b65fede5040f32d5f.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/39b4a9f1f21b4672b3ae6343425b21d9.png