HTML5 + JavaScript绘柱状图

骑猪看日落 2024-03-22 14:15 82阅读 0赞

之前用HTML5 + JavaScript绘柱状图，可以直观显示各类型产品或品牌的所占比例大小。详见：

HTML5 + JavaScript绘柱状图+1

现在需要针对每年获得各类品牌数据进行对比，绘制柱状图会更直观。

首先我们定义二维数组aBrandType，存放品牌类型及其对应的颜色：

  1. const aBrandType = new Array(
  2. //0:品牌名称，1:颜色
  3.  ["区域公用品牌",'purple'], //0
  4.  ["农业企业品牌",'blue'], //1
  5.  ["农产品品牌", '#ff9900'], //2
  6.  ["广西农交会金奖", '#339933'], //3
  7.  ["广西农交会银奖", '#cc0000'],//4
  8.  ["中国国际农交会金奖",'#00cccc']//5
  9. );

然后我们定义二维数组aBrands，存放每个年度获得各类品牌的数量：

  1. var aBrands = new Array(
  2.  //0:年份,1:品牌总数量，2:区域公用品牌数量，3:农业企业数量；4:农产品品牌数量;5:广西农交会金奖数量……
  3.  [2018,7,2,1,4],
  4.  [2019,11,3,4,4],
  5.  [2020,3,0,2,1,2],
  6.  [2021,7,0,4,3],
  7.  [2022,6,1,4,1]
  8. );

接着我们与绘制饼图时定义一个饼图对象相类似的，定义一个柱状图对象BarChart

  1. BarChart.prototype = {
  2. ……
  3. }//BarChart.prototype

柱状图对象BarChart具有如下公开属性：

  1. var bcBarChart = new BarChart({
  2.     ctx:    cbcCtx,    //画布
  3.     width:    cbc.width,//画布宽度
  4.     height:    cbc.height,//画布高度
  5.     data:    aBrands,//柱状数据
  6.     legend:    aBrandType,//图例
  7.     title:    bcBarChartTitle //标题
  8.   });

其中bcBarChartTitle是一个对象，包括以下属性：

  1. var  bcBarChartTitle =
  2. {
  3.     text:'品牌时间分布', //标题文字
  4.     marginTop:25, //标题与画布顶部间距
  5.     fontSize:20    //标题字体大小
  6. };

为了简便便起见，我们默认标题颜色为黑色，字体为微软雅黑，所以这里没有标题的颜色和字体属性。

在柱状图对象BarChart内部有几个方法。

第一个是初始化方法init

  1.     init: function ()
  2.     {
  3.         this.scaleX = 60;    //横坐标刻度间距
  4.         this.scaleY = 28;    //纵坐标刻度间距 
  5.     } //init

在初始化方法中，我们可以定义对象内部的一些属性。

第二个是绘制标题方法：

  1.     //绘制标题
  2.     drawTitle: function()
  3.     {
  4.         //如果标题属性已赋值且长度大于0，则输出标题文字
  5.         if (typeof(this.title) != "undefined" && 0 < this.title.text.length)
  6.         {
  7.             this.ctx.font = "bolder " + this.title.fontSize + "px 微软雅黑";
  8.             this.ctx.fillStyle = 'black';
  9.             this.ctx.shadowBlur=20;
  10.             this.ctx.shadowColor="gray";
  11.             this.ctx.fillText(this.title.text, (this.width - this.title.text.length * this.title.fontSize)/2, this.title.marginTop);
  12.         }//if
  13.     },//drawTitle

第三个是绘制图例方法，包括绘制色块和对应的文字说明：

  1.     //绘制图例
  2.     drawLegend: function()
  3.     {
  4.         var maxLen = -1;
  5.         var fontSize = 20;//字体大小
  6.         var boxSize = 20;//色块尺寸
  7.         var sb = 5; //间距Space between
  9.         //取图例中文字说明字数的最大值
  10.         this.legend.forEach(function (v) 
  11.         {
  12.             if (v[1] > maxLen)
  13.             {
  14.                 maxLen = v[1].length;
  15.             }
  16.         });
  18.         taDbg.value += '\n maxLen=' + maxLen;
  20.         // 文字说明的横坐标
  21.         //boxX = this.width - maxLen * fontSize - legendBoxSize - sb;
  22.         var textX = this.width - maxLen * fontSize - sb*2 - 200;
  24.         //色块的的横坐标
  25.         var boxX = textX - boxSize - sb;
  27.         //纵坐标
  28.         var y = this.title.marginTop + this.title.fontSize + sb;
  29.         this.ctx.font = fontSize + "px 宋体";
  31.         for (var i=0; i < this.legend.length; i++)
  32.         {
  33.             this.ctx.fillStyle = this.legend[i][1];
  34.             this.ctx.fillRect(boxX, y, boxSize, boxSize);
  35.             this.ctx.fillStyle = 'black';
  36.             this.ctx.fillText(this.legend[i][0], textX, y + fontSize*3/4);
  37.             y += sb*2 + boxSize;
  38.         }//for
  39.     },//drawLegend

第四个是绘制纵坐标方法：

  1.     //绘制纵坐标
  2.     drawOrdinate: function()
  3.     {
  4.         var fontSize = 20;
  5.         var datumPointX = 30;//坐标原点x
  6.         var datumPointY = this.height - 50;//坐标原点y
  8.         //1、取纵坐标最大值
  9.         var maxOrdinate = -1;
  10.         this.data.forEach(function (v)
  11.         {
  12.             if (v[1] > maxOrdinate)
  13.             {
  14.                 maxOrdinate = v[1];
  15.             }
  16.         });
  17.         taDbg.value +=     '\n maxOrdinate=' + maxOrdinate;
  20.         //画纵坐标轴
  21.         this.ctx.moveTo(datumPointX, datumPointY);
  22.         this.ctx.lineTo(datumPointX,  this.title.fontSize + this.title.marginTop + fontSize);
  23.         this.ctx.stroke();
  25.         //画纵坐标刻度
  26.         for (var i=0; i <= maxOrdinate; i++)
  27.         {
  28.             var j =  datumPointY - i * this.scaleY;
  29.             this.ctx.moveTo(datumPointX, j);
  30.             //this.ctx.lineTo(this.width - 50 , j);
  31.             this.ctx.lineTo(this.width - (this.data.length-1) * this.scaleX, j);
  32.             this.ctx.stroke();
  33.         }
  35.         //绘制纵坐标刻度值
  36.         //this.ctx.textAlign = "end";
  37.         this.ctx.font = fontSize + "px 宋体";
  38.         for (var i=1; i <= maxOrdinate; i++)
  39.         {
  40.             this.ctx.fillText(i, 0, datumPointY - i * this.scaleY + fontSize/3);
  41.         }
  43.         //输出纵坐标名称
  44.         //this.ctx.fillText('数量', 0, datumPointY -  maxOrdinate * this.scaleY - fontSize);
  45.         this.ctx.fillText('数量', 0, datumPointY -  maxOrdinate * this.scaleY - fontSize*2);
  47.         //taDbg.value +=     '\n minOrdinate=' + minOrdinate + '  maxOrdinate=' + maxOrdinate;
  48.     },//drawOrdinate

第五个是绘制横坐标方法：

  1.     //绘制横坐标
  2.     drawDiascissa: function()
  3.     {
  4.         var fontSize = 20;
  6.         this.ctx.font = fontSize + "px 宋体";
  7.         for (var i=0; i < this.data.length; i++)
  8.         {
  9.             this.ctx.fillText(this.data[i][0], (i+1) * this.scaleX , this.height - fontSize);
  10.         }
  11.         //this.ctx.fillText('年度',  this.width - 4*fontSize, this.height - 50 + fontSize/3);
  12.         this.ctx.fillText('年度',  this.width - (this.data.length-1) * this.scaleX, this.height - fontSize);    
  13.     },//drawDiascissa

最后一个是绘制数据柱状条方法：

  1.     //绘制数据柱状条
  2.     drawBar: function()
  3.     {
  4.         var fontSize = 20;
  6.         this.ctx.font = fontSize + "px 宋体";
  7.         for (var i=0; i < this.data.length; i++)
  8.         {
  10.             var k = this.height - 50;
  11.             for (var j=2; j < this.data[i].length; j++)
  12.             {
  13.                 if ("undefined"!=this.data[i][j] && this.data[i][j] > 0) 
  14.                 {
  15.                     this.ctx.fillStyle = this.legend[j-2][1];
  16.                     k -= this.data[i][j] * 28;
  17.                     this.ctx.fillRect((i+1) * this.scaleX, k, fontSize * 2, this.data[i][j] * this.scaleY);
  19.                     this.ctx.fillStyle = 'white';
  20.                     this.ctx.fillText(this.data[i][j], (i+1) * this.scaleX + Math.round(fontSize*2/3), k + this.scaleY*this.data[i][j]*2/3);
  22.                     //taDbg.value += '\n this.data[' + i + '][' + j + ']=' + this.data[i][j] + '  this.ctx.fillStyle=' + this.ctx.fillStyle;
  23.                 }//if
  24.             }//for
  25.         }
  26.     },//drawBar

完整的代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="Author" content="PurpleEndurer">
  6.   <title>柱状图</title>
  7.  </head>
  8.  <body>
  9.   <canvas id="canvasBarChart" width="600" height="450" style="border:1px solid black; margin:50px; overflow:auto;"> 你的浏览器不支持HTML5 canvas </canvas>
  10.   <textarea border="1" id="taDebug" cols="80" rows="15">debug：</textarea>
  11.     <script type="text/javascript">
  12. var taDbg = document.getElementById("taDebug");
  15. const aBrandType = new Array(
  16. //0:品牌名称，1:颜色
  17.  ["区域公用品牌",'purple'], //0
  18.  ["农业企业品牌",'blue'], //1
  19.  ["农产品品牌", '#ff9900'], //2
  20.  ["广西农交会金奖", '#339933'], //3
  21.  ["广西农交会银奖", '#cc0000'],//4
  22.  ["中国国际农交会金奖",'#00cccc']//5
  23. ); 
  25. var aBrands = new Array(
  26.  //0:年份,1:品牌总数量，2:区域公用品牌数量，3:农业企业数量；4:农产品品牌数量;5:广西农交会金奖数量……
  27.  [2018,7,2,1,4],
  28.  [2019,11,3,4,4],
  29.  [2020,3,0,2,1,2],
  30.  [2021,7,0,4,3],
  31.  [2022,6,1,4,1]
  32. );
  34. var cbc = document.getElementById("canvasBarChart");
  35. cbc.height    = 450;
  36. cbc.width    = 600;
  37. var cbcCtx = cbc.getContext("2d");
  39. function BarChart(obj)
  40. {
  41.     //导入外部公开的属性
  42.     for(var key in obj)
  43.     {
  44.         this[key] = obj[key];
  45.     }
  47.     this.init();//初始化
  48.     this.drawTitle();//绘制标题
  49.     this.drawLegend();//绘制图例
  50.     this.drawOrdinate();//绘制横坐标
  51.     this.drawDiascissa();//绘制纵坐标
  52.     this.drawBar();//绘制数据柱状条
  53. }
  55. BarChart.prototype = {
  56.     //绘制纵坐标
  57.     drawOrdinate: function()
  58.     {
  59.         //var scale = 28;//刻度
  60.         var fontSize = 20;
  61.         var datumPointX = 30;//坐标原点x
  62.         var datumPointY = this.height - 50;//坐标原点y
  64.         //1、取纵坐标最大值
  65.         var maxOrdinate = -1;
  66.         this.data.forEach(function (v)
  67.         {
  68.             if (v[1] > maxOrdinate)
  69.             {
  70.                 maxOrdinate = v[1];
  71.             }
  72.         });
  73.         taDbg.value +=     '\n maxOrdinate=' + maxOrdinate;
  76.         //画纵坐标轴
  78.         this.ctx.moveTo(datumPointX, datumPointY);
  79.         this.ctx.lineTo(datumPointX,  this.title.fontSize + this.title.marginTop + fontSize);
  80.         this.ctx.stroke();
  82.         //画纵坐标刻度
  83.         for (var i=0; i <= maxOrdinate; i++)
  84.         {
  85.             var j =  datumPointY - i * this.scaleY;
  86.             this.ctx.moveTo(datumPointX, j);
  87.             //this.ctx.lineTo(this.width - 50 , j);
  88.             this.ctx.lineTo(this.width - (this.data.length-1) * this.scaleX, j);
  89.             this.ctx.stroke();
  90.         }
  92.         //绘制纵坐标刻度值
  93.         //this.ctx.textAlign = "end";
  94.         this.ctx.font = fontSize + "px 宋体";
  95.         for (var i=1; i <= maxOrdinate; i++)
  96.         {
  97.             this.ctx.fillText(i, 0, datumPointY - i * this.scaleY + fontSize/3);
  98.         }
  100.         //输出纵坐标名称
  101.         //this.ctx.fillText('数量', 0, datumPointY -  maxOrdinate * this.scaleY - fontSize);
  102.         this.ctx.fillText('数量', 0, datumPointY -  maxOrdinate * this.scaleY - fontSize*2);
  104.         //taDbg.value +=     '\n minOrdinate=' + minOrdinate + '  maxOrdinate=' + maxOrdinate;
  105.     },//drawOrdinate
  107.     //绘制横坐标
  108.     drawDiascissa: function()
  109.     {
  110.         var fontSize = 20;
  112.         this.ctx.font = fontSize + "px 宋体";
  113.         for (var i=0; i < this.data.length; i++)
  114.         {
  115.             this.ctx.fillText(this.data[i][0], (i+1) * this.scaleX , this.height - fontSize);
  116.         }
  117.         //this.ctx.fillText('年度',  this.width - 4*fontSize, this.height - 50 + fontSize/3);
  118.         this.ctx.fillText('年度',  this.width - (this.data.length-1) * this.scaleX, this.height - fontSize);    
  119.     },//drawDiascissa
  121.     //绘制数据柱状条
  122.     drawBar: function()
  123.     {
  124.         var fontSize = 20;
  126.         this.ctx.font = fontSize + "px 宋体";
  127.         for (var i=0; i < this.data.length; i++)
  128.         {
  129.             var k = this.height - 50;
  130.             for (var j=2; j < this.data[i].length; j++)
  131.             {
  132.                 if ("undefined"!=this.data[i][j] && this.data[i][j] > 0) 
  133.                 {
  134.                     this.ctx.fillStyle = this.legend[j-2][1];
  135.                     k -= this.data[i][j] * 28;
  136.                     this.ctx.fillRect((i+1) * this.scaleX, k, fontSize * 2, this.data[i][j] * this.scaleY);
  137.                     this.ctx.fillStyle = 'white';
  138.                     this.ctx.fillText(this.data[i][j], (i+1) * this.scaleX + Math.round(fontSize*2/3), k + this.scaleY*this.data[i][j]*2/3);
  140.                     //taDbg.value += '\n this.data[' + i + '][' + j + ']=' + this.data[i][j] + '  this.ctx.fillStyle=' + this.ctx.fillStyle;
  141.                 }//if
  142.             }//for
  143.         }
  144.     },//drawBar
  146.     //绘制图例
  147.     drawLegend: function()
  148.     {
  149.         var maxLen = -1;
  150.         var fontSize = 20;//字体大小
  151.         var boxSize = 20;//色块尺寸
  152.         var sb = 5; //间距Space between
  154.         //取图例中文字说明字数的最大值
  155.         this.legend.forEach(function (v) 
  156.         {
  157.             if (v[1] > maxLen)
  158.             {
  159.                 maxLen = v[1].length;
  160.             }
  161.         });
  163.         taDbg.value += '\n maxLen=' + maxLen;
  165.         // 文字说明的横坐标
  166.         //boxX = this.width - maxLen * fontSize - legendBoxSize - sb;
  167.         var textX = this.width - maxLen * fontSize - sb*2 - 200;
  169.         //色块的的横坐标
  170.         var boxX = textX - boxSize - sb;
  172.         //纵坐标
  173.         var y = this.title.marginTop + this.title.fontSize + sb;
  174.         this.ctx.font = fontSize + "px 宋体";
  176.         for (var i=0; i < this.legend.length; i++)
  177.         {
  178.             this.ctx.fillStyle = this.legend[i][1];
  179.             this.ctx.fillRect(boxX, y, boxSize, boxSize);
  180.             this.ctx.fillStyle = 'black';
  181.             this.ctx.fillText(this.legend[i][0], textX, y + fontSize*3/4);
  182.             y += sb*2 + boxSize;
  183.         }//for
  184.     },//drawLegend
  186.     //绘制标题
  187.     drawTitle: function()
  188.     {
  190.         //如果标题属性已赋值且长度大于0，则输出标题文字
  191.         if (typeof(this.title) != "undefined" && 0 < this.title.text.length)
  192.         {
  193.             this.ctx.font = "bolder " + this.title.fontSize + "px 微软雅黑";
  194.             this.ctx.fillStyle = 'black';//默认黑色
  195.             this.ctx.shadowBlur=20;
  196.             this.ctx.shadowColor="gray";
  197.             this.ctx.fillText(this.title.text, (this.width - this.title.text.length * this.title.fontSize)/2, this.title.marginTop);
  198.         }//if
  199.     },//drawTitle
  201.     //初始化
  202.     init: function ()
  203.     {
  204.         this.scaleX = 60;    //横坐标刻度间距
  205.         this.scaleY = 28;    //纵坐标刻度间距 
  206.     } //init
  207. }//BarChart.prototype
  209. var  bcBarChartTitle =
  210. {
  211.     text:'品牌时间分布', //标题文字
  212.     marginTop:25, //标题与画布顶部间距
  213.     fontSize:20    //标题字体
  214. };
  216. var bcBarChart = new BarChart({
  217.     ctx:    cbcCtx,
  218.     width:    cbc.width,
  219.     height:    cbc.height,
  220.     data:    aBrands,
  221.     legend:    aBrandType,
  222.     title:    bcBarChartTitle
  223.   });
  224.     </script>
  225.  </body>
  226. </html>

代码显示效果如下图：

bda71004de6e46129e826eeca2a16068.png

发表评论

表情：
评论列表 （有 0 条评论，82人围观）

还没有评论，来说两句吧...

相关阅读