canvas学习之柱状图

项目地址:http://pan.baidu.com/s/1nvhWrwP

因为最近项目中使用到了图表,而且个人一直希望研究canvas，所以最近几天花时间对canvas好好研究了一下,并写了一个demo,下载demo下来后 npm install后,使用webpack打包后,可以找到canvas.html页面，看到具体效果，下面主要介绍我写的几个文件

canvas.js:技术绘图js

histogram.js:柱状图js

lineChart.js:折线图js

柱状图使用:

　　

import {canvasPoint} from '../../assets/js/canvas';//引入的目的是获取点再canvas中的位置
import {basicInfo,histogramMousemoveEvent} from '../../assets/js/histogram';

//绘制图
function histogramCreate(width,point){
　　var canvas=document.getElementById('myCanvas');
　　if(!!width){
　　if(width > 758)
　　canvas.width = width;
　　}else{
　　var canvasWidth = document.getElementById('histogramPanel');
　　if(canvasWidth.offsetWidth > 758)
　　canvas.width = canvasWidth.offsetWidth;
　　}
　　addHistogramMousemove(canvas);
　　var ctx=canvas.getContext('2d');
　　ctx.clearRect(0,0,canvas.width,canvas.height);
　　//绘制柱状图
　　basicInfo(ctx,[{num:2,name:"2017-04-01"},{num:10,name:"2017-04-02"},{num:15,name:"2017-04-03"},{num:20,name:"2017-04-04"}],point);
}

window.onload = function(){
　　histogramCreate();
}

window.onresize = function(){
histogramCreate();
}

//添加鼠标滑动监听事件
function addHistogramMousemove(canvas){
　　canvas.addEventListener("mousemove",function(e){
　　var point = canvasPoint(canvas,e);
　　histogramMousemoveEvent(canvas,point);
　　},false);
　　canvas.addEventListener("click",function(e){
　　var point = canvasPoint(canvas,e);
　　histogramMousemoveEvent(canvas,point);
　　},false);
}