HTML5 + JavaScript绘制饼图+1

左手的ㄟ右手 2024-03-22 06:29 10阅读 0赞

利用难得的假期继续改进“圳品”信息系统，在另一个模块中使用之前的Pie（）代码编制饼图。

代码详见：[改进“圳品”信息系统网页上的饼图：加标题+文字说明换行显示][Link 1]

却发现饼图标题没显示出来。

研究源代码后发现问题出在计算饼图标题输出位置的代码上，即：

this.ctx.fillText(this.title, (tcCanvas.width - this.title.length*fontSize)/2, 25);

在这里我们使用了tcCanvas.width，由于tcCanvas是一个实例，在另一个实例中调用这段代码就会出现问题。

改进的代码是把Canvas的width作为一个属性传递进来，即分为两步。

第一步，增加width属性：

var typeCountPie = new Pie({
        ctx: ctx,
        x: tcCanvas.width / 2,
        y: tcCanvas.height / 2,
        r: 150,
    	width:tcCanvas.width,//增加width属性
    	data:aTypeCount,
        title:'“圳品”产品类别分析'
      });

第2步，修改计算饼图标题输出位置的代码，改为：

this.ctx.fillText(this.title, (this.width - this.title.length*fontSize)/2, 25);

也就是用this.width 替代 了 tcCanvas.width，增强了代码通用性。完整的代码如下：

<!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 = 20;//标题文字大小
     
    	//如果标题属性已赋值且长度大于0，则输出标题文件
    	if (typeof(this.title) != "undefined" && 0 < this.title.length)
    	{
    		this.ctx.font = "bolder "+ fontSize + "px 微软雅黑";
    		this.ctx.fillStyle = 'black';
    		this.ctx.fillText(this.title, (this.width - this.title.length*fontSize)/2, 25);
    	}
     
          fontSize= 16;
          this.ctx.font = fontSize+"px 微软雅黑";
          var textWidth= 100;
          this.slice.forEach(function(obj){
          this.ctx.fillStyle = obj.color;// '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 -= textWidth+10;
            }
     
            //文字的y坐标位置
            var y2 = this.y + h;
            if (y2 >= this.y)
            {
                y2 += fontSize; 
            }
            else
            {
                //在圆心的上方
                y2 -= fontSize;
            }
     
           //this.ctx.fillText(obj.text, x2, y2);//在一行输出
            taDbg.value += "\nthis.r=" + this.r + "  obj.text= " + obj.text + " x2=" + x2 + " y2=" + y2;
     
    	//换行输出方法1
    	var charNumPerLine = Math.ceil(textWidth / fontSize);
    	var t = obj.text, i = 0;
    	while (t.length > charNumPerLine)
    	{
    		this.ctx.fillText(t.substr(i,charNumPerLine), x2,y2);//绘制截取部分
    		i += charNumPerLine;
    		t = t.substring(i);
    		y2 += fontSize;
    	}
    	if (i <= obj.text.length)
    	{
    		this.ctx.fillText(t, x2,y2);//绘制剩余部分
    	}
     
    /*
           	//换行输出方法2
    	var i, lastSubStrIndex = lineWidth=0;
    	for (i=0;i< obj.text.length; i++)
    	{
    	        taDbg.value += '\nobj.text['+i +']=' + obj.text[i];
    		lineWidth += ctx.measureText(obj.text[i]).width; 
    		if (lineWidth > textWidth)
    		{  
    			this.ctx.fillText(obj.text.substring(lastSubStrIndex,i), x2,y2);//绘制截取部分
    			y2 +=  fontSize;
    			lineWidth = 0;
    			lastSubStrIndex = i;
    		} 
    		if(i==obj.text.length-1)
    		{	//绘制剩余部分
    			this.ctx.fillText(obj.text.substring(lastSubStrIndex,i+1),x2,y2);
    			break;
    		}
    	}//for*/        
          },this);
        }
      };
     
     var typeCountPie = new Pie({
        ctx: ctx,
        x: tcCanvas.width / 2,
        y: tcCanvas.height / 2,
        r: 150,
    	width:tcCanvas.width,//增加width属性
    	data:aTypeCount,
        title:'“圳品”产品类别分析'
      });
     
     </script>
     </body>
    </html>

代码运行的效果如下：

![0bfac0ad501046989d6441196d8053b7.jpeg][]

[Link 1]: https://blog.csdn.net/Purpleendurer/article/details/129802728?spm=1001.2014.3001.5501
[0bfac0ad501046989d6441196d8053b7.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/5d4ba6a2289845d68fb291ee2faf104c.png