javascript实例教程:使用canvas技术模仿echarts柱状图

更新日期: 2020-01-24阅读: 1.7k标签: canvas

canvas 画布是html5中新增的标签,可以通过js操作 canvas 绘图 api在网页中绘制图像。

百度开发了一个开源的可视化图表库ECharts,功能非常强大,可以实现折线图、柱状图、散点图、饼图、K线图、地图等多种图表。很多项目都有使用过ECharts开发过图表功能。

本实例教程使用原生js教你开发一个仿ECharts的柱状图。学习本教程之前,读者需要具备html和css技能,同时需要有简单的javascript基础。

按照ECharts的开发方法,图表都是生成在一个HTML元素中。所以本实例中也先准备一个id名为canvasWrap的div元素,如下所示:

<div class="canvas_wrap" id="canvasWrap"></div>

然后在canvasWrap元素中创建canvas元素,再在canvas元素上绘制柱状图。开发之前,按照惯例,还是先分析柱状图的具体操作,再根据具体操作把实现功能的方法分成多个步骤,接下来一个步骤一个步骤去完成它。

1. 编写柱状图数据
2. 获取canvasWrap元素及宽高
3. 创建绘图环境
  3.1 创建canvas画布
  3.2 设置canvas画布的宽度和高度
  3.3 将canvas画布放入到canvasWrap元素中
  3.4 创建绘图上下文环境
4. 设定坐标区域
5. 绘制x轴
  5.1 绘制轴线
  5.2 绘制刻度线
  5.3 绘制刻度名称
6. 绘制y轴
  6.1 绘制轴线
  6.2 绘制刻度线
  6.3 绘制刻度值
  6.4 绘制x轴网格线
7. 绘制柱图
  7.1 计算柱图宽度
  7.2 计算柱图高度
  7.3 计算柱图X起点
  7.4 计算柱图Y起点
  7.5 绘制柱图

具体代码如下:

//1 编写柱状图数据
option = {
  //x轴数据
  xAxis: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  //柱图数据
  series: [{
    //多写几组数据,用于查看不同数据时的图表效果
    // data: [0.01, 0.2, 0.05, 0.07, 0.04, 0.13, 0.9],
    // data: [1, 1, 5, 7, 4, 1, 9],
    // data: [1213, 30, 150, 80, 70, 910, 630],
    data: [120, 199, 150, 180, 70, 110, 130],
    //图形样式:柱图
    type: 'bar'
  }]
};

//创建图表函数,wrap:图表父元素id;data:图表数据
function fnCharts(wrap,data){
  //2.获取canvasWrap元素
  var eWrap = document.getElementById(wrap);
  //2.获取canvasWrap元素宽度和高度,用于设置canvas画布大小
  var nWrapW = eWrap.offsetWidth;
  var nWrapH = eWrap.offsetHeight;

  //3.1 创建canvas画布
  var eCanvas = document.createElement('canvas');
  //3.2 设置canvas画布的宽度和高度
  eCanvas.width = nWrapW;
  eCanvas.height = nWrapH;
  //3.3 将canvas画布放入到canvasWrap元素中
  eWrap.appendChild(eCanvas);
  //3.4 创建绘图上下文环境(才能够在Canvas画布上绘制)
  var oCtx = eCanvas.getContext('2d');

  //4.设定坐标区域左上角和右下角
  //起点设置为50.5,而不是整数,是为了让线条变清晰
  var nZoneStartX = 50.5;
  var nZoneStartY = 50.5;
  var nZoneEndX = nWrapW - nZoneStartX;
  var nZoneEndY = nWrapH - nZoneStartY;

  //5.1 使用线条函数绘制x轴轴线
  fnCreatLine(nZoneStartX,nZoneEndY,nZoneEndX,nZoneEndY);
  //计算x轴长度
  var nLonX = nZoneEndX - nZoneStartX;
  //获取x轴数据数组长度
  var nDataLon = option.xAxis.data.length;
  //根据x轴数据数组长度循环,在循环中绘制刻度线和刻度数值名称
  for(let i=0;i<nDataLon;i++){
    //计算出x轴刻度线起点在x轴上的值
    let nScaleX = nZoneStartX+Math.floor(nLonX*(i/nDataLon));
    //刻度线起点都在x轴上
    let nScaleY = nZoneEndY;
    //5.2 绘制刻度线,长度为10
    fnCreatLine(nScaleX,nScaleY,nScaleX,nScaleY+10);
    //从数据中获取刻度名称字符串
    let sName = option.xAxis.data[i];
    //计算出刻度名称起点
    let nNameX = nZoneStartX+Math.floor(nLonX*(i/nDataLon))+Math.floor(nLonX*(1/nDataLon))/2;
    let nNameY = nZoneEndY+15;
    //5.3 绘制刻度名称
    fnCreatText(sName,nNameX,nNameY,'#aaa','center');
  }

  //6.1 使用线条函数绘制y轴轴线
  fnCreatLine(nZoneStartX,nZoneEndY,nZoneStartX,nZoneStartY);
  //绘制y轴刻度线前,需要有刻度最大值、最小值、刻度线段数和刻度线之间的间隔这些数据。
  //刻度最大值先从数组中取最大值,等下再计算应该显示的最大值
  var nMaxScal =  Math.max.apply(null,option.series[0].data);
  //刻度最小值在本实例中取0
  var nMinScal = 0;
  //刻度线段数在本实例中设置为4
  var nSplit = 4;
  //计算刻度间隔值
  var nStep = (nMaxScal-nMinScal)/nSplit;
  //这时候会发现刻度间隔值好像有点奇怪,因为一般图表的刻度间隔值都是5的倍数,
  //比如:[0,0.5,1.0,1.5,2]或[0,50,100,150,200]。
  //所以还需要进一步计算,看nStep是否是5的倍数,如果不是,则递增nIncrease,使其达到最接近的5的倍数。
  //计算第一步,根据nStep算出倍数值应该是0.5或5或50或...
  //在本实例中通过把nStep数值先转换为字符串再进行处理(也可以使用对数和指数去计算)。
  var sTemp = '' + nStep; //把nStep转换为字符串
  //声明一个需要递增的数,默认为1
  var nIncrease = 1;
  //声明一个变量用于解决小数相乘产生的精度bug
  var nTempMultiple = 1;  

  //nIncrease取10的n次幂,通过以下判断计算
  if(sTemp.indexOf('.')==-1){
    //如果nStep不包含小数点,nIncrease取10的sTemp.length-2次幂。
    //比如nStep为19的话,nIncrease = 10的0次幂,递增数为1
    //nStep为9的话,nIncrease = 10的-1次幂,递增数为0.1
    //nStep为199的话,nIncrease = 10的1次幂,递增数为10
    nIncrease = Math.pow(10,sTemp.length-2);
  }else{
    //如果nStep包含小数点,nIncrease取10的sTemp整数位-2次幂。
    nIncrease = Math.pow(10,sTemp.indexOf('.')-2);
    //这个变量用于解决小数相乘可能产生的精度bug,比如nIncrease是小数的情况
    nTempMultiple = Math.pow(10,sTemp.indexOf('.')); 
  }
  //倍数取整,便于递增,如165改成160,16.5改成16,1.65改成1.6,可通过下列公式实现
  nStep = Math.ceil(nStep/nIncrease)*(nIncrease*nTempMultiple)/nTempMultiple;
  //使用循环递增nIncrease修正刻度值
  while(nStep%(nIncrease*5)!=0){
    nStep += nIncrease*1;
  }
  //通过间隔值乘以线段数,修改刻度最大值
  nMaxScal = nStep * nSplit;
  //计算y轴长度,这里多减3是因为y轴顶端要留点距离
  var nLonY = nZoneEndY - nZoneStartY - 3;
  //绘制y轴刻度
  for(let i=0;i<=nSplit;i++){
    //刻度线起点都在y轴上
    let nScaleX = nZoneStartX;
    //计算出y轴刻度线起点在y轴上的值 
    let nScaleY = nZoneEndY-Math.floor(nLonY*(i/nSplit));
    //6.2 绘制刻度线
    fnCreatLine(nScaleX,nScaleY,nScaleX-10,nScaleY);
    //6.3 绘制刻度值
    fnCreatText(''+i*nStep,nScaleX-20,nScaleY,'#333');
    if(i!=0){
      //6.4 非0位置,绘制x轴网格线
      fnCreatLine(nScaleX,nScaleY,nScaleX+nLonX,nScaleY,'#ccc');
    }
  }

  //7.1 计算柱图宽度
  let nBarWidth = Math.ceil(Math.floor(nLonX*(1/nDataLon))*.8);
  //遍历x轴数据
  for(let i=0;i<nDataLon;i++){
    //7.2 计算柱图高度
    let nBarHeight = nLonY/nMaxScal*option.series[0].data[i];
    //7.3 计算柱图X起点
    let nBarStartX = nZoneStartX+Math.floor(nLonX*(i/nDataLon))
                     +(Math.floor(nLonX*(1/nDataLon))-nBarWidth)/2;
    //7.4 计算柱图Y起点
    let nBarStartY = nZoneEndY-nBarHeight;
    //7.5 绘制柱图
    fnCreatRect(nBarStartX,nBarStartY,nBarWidth,nBarHeight);
  }

  //绘制线条函数
  function fnCreatLine(sX,sY,eX,eY,color='#000'){
    //开始绘制路径
    oCtx.beginPath();
    //设置路径颜色
    oCtx.strokeStyle = color;
    //设置路径起点和终点,绘制线条
    oCtx.moveTo(sX,sY);
    oCtx.lineTo(eX,eY);
    //给路径添加颜色
    oCtx.stroke();
  }

  //绘制文字
  function fnCreatText(text,x,y,color='#000',align='end',baseLine='middle'){
    //设置文字颜色
    oCtx.fillStyle = color;
    //设置水平对齐方式
    oCtx.textAlign = align;
    //设置垂直对齐方式
    oCtx.textBaseline = baseLine;
    //绘制文字
    oCtx.fillText(text,x,y);
  }

  //绘制矩形
  function fnCreatRect(x,y,width,height,color='#a00'){
    //设置颜色
    oCtx.fillStyle = color;
    oCtx.fillRect(x,y,width,height);
  }
}
//调用图表函数,并传入元素id和option数据
fnCharts('canvasWrap',option);

这篇实例教程可能需要点耐心去读源码,如果碰到不明白的地方,可以在不明白的源码位置输出值,也许能豁然开朗。


链接: https://www.fly63.com/article/detial/8752

HTML5 Canvas绘图基本使用方法, H5使用Canvas绘图

Canvas 是H5的一部分,允许脚本语言动态渲染图像。Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的绘图功能(API),在网页上渲染动态效果图。

web图片前端裁剪功能实现_利用html5 canvas技术实现图片裁剪

上传截图很多做法是把图像发送到后端,把裁剪后的结果发送给浏览器,这种方式会增加处理时延。用canvas提供的API实现纯前端的剪切:这里头关键有三步:显示未经处理的图片,得到裁剪区域,显示裁剪后的区域。

原生js使用canvas实现图片格式webp/png/jpeg在线转换

javascript完成图片格式转换: 通过input上传图片,使用FileReader将文件读取到内存中。将图片转换为canvas,canvas.toDataURL()方法设置为我们需要的格式,最后将canvas转换为图片。

离屏Canvas — 使用Web Worker提高你的Canvas运行速度

现在因为有了离屏Canvas,你可以不用在你的主线程中绘制图像了!Canvas 是一个非常受欢迎的表现方式,同时也是WebGL的入口。它能绘制图形,图片,展示动画,甚至是处理视频内容

canvas高效绘制10万图形,你必须知道的高效绘制技巧

最近的一个客户项目中,简化的需求是绘制按照行列绘制很多个圆圈。需求看起来不难,上手就可以做,写两个for循环。,IT行业的知识更新越来越快,能够以不变应万变的人,就是拥有良好的学习力、创造力、判断力和思考力的人。这些能力会让你在变换万千的技术海洋中,屹立不倒,不被淹没。

利用canvas将网页元素生成图片并保存在本地

利用canvas将网页元素生成图片并保存在本地,首先引入三个文件,createElementNS() 方法可创建带有指定命名空间的元素节点。 createElementNS(ns,name) > createElementNS() 方法与 createElement() 方法相似

基于 HTML5 Canvas 的智能安防 SCADA 巡逻模块

随着大数据时代的来临,物联网的日益发展,原先的 SCADA 系统本身也在求新求变,从最开始的专业计算机和操作系统,到通用计算机和相关软件,再到现在基于 HTML5 Canvas 的新型组态开发,其应用的范围也从最初的电力

js用canvas实现简单的粒子运动

在写下合格粒子运动时要先清楚你的思路,不能一开始就盲目的开始写,首先先要确定思路然后在去一步步的实现,在写的过程要注意细节,要思考js有些知识是跟数学知识相关的要注意观察

Canvas 点线动画案例

canvas 画的圆不是圆,是椭圆。不要在style里指定 Canvas 的宽度,Canvas 画布的尺寸的大小和显示的大小是有很大的区别的,在 canvas 里面设置的是才是 Canvas 本身的大小。不要企图通过闭合现有路径来开始一条新路径

Canvas在移动端绘制模糊的原因与解决办法

由于一些移动端的兼容性原因,我们某个项目需要前端将pdf转换成在移动端页面可直接观看的界面。为了方便解决,我们采用了pdf.js这个插件,该插件可以将pdf转换成canvas绘制在页面上

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!