资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/【带着canvas去流浪】（1）绘制柱状图

【带着canvas去流浪】（1）绘制柱状图

sarva / 1767人阅读

摘要：示例代码托管在博客园地址大史住在大前端原创博文目录华为云社区地址你要的前端打怪升级指南一任务说明使用原生绘制柱状图。

</>复制代码 
  1. 示例代码托管在：http://www.github.com/dashnowords/blogs
    博客园地址：《大史住在大前端》原创博文目录
  2. 华为云社区地址：【你要的前端打怪升级指南】

[TOC]

一. 任务说明

使用原生canvasAPI绘制柱状图。（柱状图截图来自于百度Echarts官方示例库【查看示例链接】）

二. 重点提示

柱状图或许是最容易实现的图表类型了，矩形的部分直接使用fillRect()来绘制即可，为了将坐标轴标签文字绘制在小分割线中间，需要用measureText()来测量文本的宽度，然后进行相应的偏移，否则直接绘制的话文字的左边界会和直线相对齐。其他部分都是一些基本API的使用，希望各位小伙伴通过做练习来熟悉这些API的用法。

三. 示例代码

提示：代码中将个别图表参数直接写在了函数里（也就是所谓的“魔鬼数字”），这种做法是不提倡的，因为它违反了开发的基本原则之一“开放封闭原则”。如果你使用过Echarts图表库就会发现，图表中几乎所有要素都可以通过参数来定制，此处只需要关注canvasAPI的实现方法即可。

</>复制代码 
  1. /**
  2.  * 获取canvas绘图上下文
  3.  * @type {[type]}
  4.  */
  5. const canvas = document.getElementById("canvas");
  6. const context = canvas.getContext("2d");
  7. //绘图配置
  8. let options = {
  9.         chartZone:[50,50,1000,700],//标识绘图区域
  10.         yAxisLabel:["0","100","200","300","400"],//标示Y轴坐标
  11.         yMax:400,//Y轴最大值
  12.         xAxisLabel:["Mon","Tue","Wed","Thu","Fri","Sat","Sun"],//X轴坐标
  13.         data:[10,50,200,330,390,320,220],//柱状图数据
  14.         barStyle:{
  15.             width:70,//柱状图宽度
  16.             color:"#1abc9c"//柱状图颜色
  17.         }
  18.     }
  19. /*Echarts使用时，会调用实例方法echartsInstance.setOptions(options)来启动绘图*/
  20. drawBarChart(options);
  21. /**
  22.  * 绘制柱状图
  23.  */
  24. function drawBarChart(options) {
  25.     drawAxis(options); //绘制坐标轴
  26.     drawYLabels(options); //绘制y轴坐标
  27.     drawXLabels(options); //绘制x轴坐标
  28.     //drawData(options);//绘制柱状图
  29.     drawDataGradient(options);//绘制渐变色柱状图
  30. }
  31. /**
  32.  * 绘制坐标轴
  33.  */
  34. function drawAxis(options) {
  35.     let chartZone = options.chartZone;
  36.     context.strokeWidth = 4;
  37.     context.strokeStyle = "#353535";
  38.     context.moveTo(chartZone[0],chartZone[1]);
  39.     context.lineTo(chartZone[0],chartZone[3]); //y轴总高从50到700
  40.     context.lineTo(chartZone[2],chartZone[3]); //x轴总长从50到1000
  41.     context.stroke();
  42. }
  43. /**
  44.  * 绘制y轴坐标
  45.  */
  46. function drawYLabels(options) {
  47.     let labels = options.yAxisLabel;
  48.     let yLength = (options.chartZone[3] - options.chartZone[1])*0.98;
  49.     let gap = yLength / (labels.length - 1);
  50.     
  51.     labels.forEach(function (label, index) {
  52.         //绘制坐标文字
  53.         let offset = context.measureText(label).width + 20;
  54.         context.strokeStyle = "#eaeaea";
  55.         context.font = "16px";
  56.         context.fillText(label, options.chartZone[0] - offset ,options.chartZone[3] - index * gap);
  57.         //绘制小间隔
  58.         context.beginPath();
  59.         context.strokeStyle = "#353535";
  60.         context.moveTo(options.chartZone[0] - 10, options.chartZone[3] - index * gap);
  61.         context.lineTo(options.chartZone[0], options.chartZone[3] - index * gap);
  62.         context.stroke();
  63.         //绘制辅助线
  64.         context.beginPath();
  65.         context.strokeStyle = "#eaeaea";
  66.         context.strokeWidth = 2;
  67.         context.moveTo(options.chartZone[0], options.chartZone[3] - index * gap);
  68.         context.lineTo(options.chartZone[2], options.chartZone[3] - index * gap);
  69.         context.stroke();
  70.     });
  71. }
  72. /**
  73.  * 绘制x轴坐标
  74.  */
  75. function drawXLabels(options) {
  76.     let labels = options.xAxisLabel;
  77.     let xLength = (options.chartZone[2] - options.chartZone[0])*0.96;
  78.     let gap = xLength / labels.length;
  79.     
  80.     labels.forEach(function (label, index) {
  81.         //绘制坐标文字
  82.         let offset = context.measureText(label).width;
  83.         context.strokeStyle = "#eaeaea";
  84.         context.font = "18px";
  85.         context.fillText(label, options.chartZone[0] + (index + 1) * gap - offset ,options.chartZone[3] + 20);
  86.         //绘制小间隔
  87.         context.beginPath();
  88.         context.strokeStyle = "#353535";
  89.         context.moveTo(options.chartZone[0] + (index + 1) * gap - offset / 2 ,options.chartZone[3]);
  90.         context.lineTo(options.chartZone[0] + (index + 1) * gap - offset / 2,options.chartZone[3]+5);
  91.         context.stroke();
  92.         //存储偏移量
  93.         options.offsetXLabel = offset / 2;
  94.     });
  95. }
  96. /**
  97.  * 绘制数据
  98.  */
  99. function drawData(options) {
  100.     let data = options.data;
  101.     let xLength = (options.chartZone[2] - options.chartZone[0])*0.96;
  102.     let yLength = (options.chartZone[3] - options.chartZone[1])*0.98;
  103.     let gap = xLength / options.xAxisLabel.length;
  104.     //绘制矩形
  105.     data.forEach(function (item, index) {
  106.         context.fillStyle = options.barStyle.color || "#1abc9c"; //02BAD4
  107.         let x0 = options.chartZone[0] + (index + 1) * gap - options.barStyle.width / 2 - options.offsetXLabel;
  108.         let height = item / options.yMax * (options.chartZone[3] - options.chartZone[1])*0.98;
  109.         let y0 =  options.chartZone[3] - height;
  110.         let width = options.barStyle.width;
  111.         context.fillRect(x0,y0,width,height);
  112.     });
  113. }
  114. /**
  115.  * 绘制线性渐变色柱状图
  116.  */
  117. function drawDataGradient(options) {
  118.     let data = options.data;
  119.     let xLength = (options.chartZone[2] - options.chartZone[0])*0.96;
  120.     let yLength = (options.chartZone[3] - options.chartZone[1])*0.98;
  121.     let gap = xLength / options.xAxisLabel.length;
  122.     //创建渐变色
  123.     let fillStyleGradient = context.createLinearGradient(50,50,50,700);
  124.         fillStyleGradient.addColorStop(0, options.barStyle.color);
  125.         fillStyleGradient.addColorStop(1, "rgba(1,176,241,0.6)");
  126.     //绘制矩形
  127.     data.forEach(function (item, index) {
  128.         context.fillStyle = fillStyleGradient;
  129.         let x0 = options.chartZone[0] + (index + 1) * gap - options.barStyle.width / 2 - options.offsetXLabel;
  130.         let height = item / options.yMax * (options.chartZone[3] - options.chartZone[1])*0.98;
  131.         let y0 =  options.chartZone[3] - height;
  132.         let width = options.barStyle.width;
  133.         context.fillRect(x0,y0,width,height);
  134.     });
  135. }

浏览器中可查看效果：

四. 思考题

如果希望在坐标轴末端加一个箭头，需要怎么做呢？

</>复制代码 
  1. /*x轴箭头示例*/
  2. //1.options中增加箭头颜色和大小的设置
  3. let options = {
  4.     //...
  5.     axisArrow:{
  6.             size:2,
  7.             color:"#DA5961"
  8.         }
  9. }
  10. //箭头绘制函数
  11. /**
  12.  * x轴绘制箭头
  13.  */
  14. function drawArrow(options) {
  15.     let factor = options.axisArrow.size;//获取箭头大小因子
  16.     context.save();//保存当前设置的绘图上下文
  17.     context.translate(options.chartZone[2], options.chartZone[3]);//移动坐标系原点至x轴末端
  18.     context.beginPath();//开始绘制箭头
  19.     context.moveTo(0,0);//移动至新原点
  20.     context.lineTo(2 * factor,-3 * factor);
  21.     context.lineTo(10 * factor,0);
  22.     context.lineTo(2 * factor, 3 * factor);
  23.     context.lineTo(0,0);
  24.     context.globalAlpha = 0.7; //设置填充色透明度
  25.     context.fillStyle = options.axisArrow.color;//获取箭头颜色
  26.     context.fill();//填充箭头路径
  27.     context.restore();//恢复绘图上下文样式设置
  28. }

箭头效果:

y轴的箭头请自行完成即可。

云服务器 GPU云服务器 柱状图 画柱状图 柱状图各种图形 mpandroidchart柱状图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104319.html

相关文章

发表评论

登陆后可评论

0条评论

sarva

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<