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元素上绘制柱状图。开发之前,按照惯例,还是先分析柱状图的具体操作,再根据具体操作把实现功能的方法分成多个步骤,接下来一个步骤一个步骤去完成它。
- 编写柱状图数据
- 获取canvasWrap元素及宽高
- 创建绘图环境
3.1 创建canvas画布
3.2 设置canvas画布的宽度和高度
3.3 将canvas画布放入到canvasWrap元素中
3.4 创建绘图上下文环境 - 设定坐标区域
- 绘制x轴
5.1 绘制轴线
5.2 绘制刻度线
5.3 绘制刻度名称 - 绘制y轴
6.1 绘制轴线
6.2 绘制刻度线
6.3 绘制刻度值
6.4 绘制x轴网格线 - 绘制柱图
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);
这篇实例教程可能需要点耐心去读源码,如果碰到不明白的地方,可以在不明白的源码位置输出值,也许能豁然开朗。