canvas图表详解系列（2）：折线图
本章建议学习时间4小时
学习方式：详细阅读，并手动实现相关代码（如果没有canvas基础，需要先学习前面的canvas基础笔记）
学习目标：此教程将教会大家如何使用canvas绘制各种图表，详细分解步骤，本次讲解折线图。
源文件下载地址：https://github.com/sutianbinde/charts
折线图
折线图是前端最基本的图表之一，我们的案例展示效果如下
功能：横轴月份，纵轴访问量，图表会根据月份和访问量的多少自动调整高度和间距，高度会有由低到高的运动效果。点击图表会有刷新重载动画效果。
实现步骤
--新建Html文件，写入canvas标签，并且定义绘制图表的方法
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.a{
background: #0bfefb;
}
</style>
</head>
<body>
<canvas id="chart" height="400" width="600" style="margin:50px"> 你的浏览器不支持HTML5 canvas </canvas> <script type="text/javascript">
function goChart(dataArr){ } var chartData = [["2017/01", 50], ["2017/02", 60], ["2017/03", 100], ["2017/04",200], ["2017/05",350], ["2017/06",600]];
goChart(chartData); </script>
</body>
</html>
--在 goChart方法中定义需要使用的变量 并获取 canvas上下文 ，并且初始化图表
注：这里我们对高清屏幕显示模糊做了处理，具体的处理方式见代码注释
// 声明所需变量
var canvas,ctx;
// 图表属性
var cWidth, cHeight, cMargin, cSpace;
var originX, originY;
// 折线图属性
var tobalDots, dotSpace, maxValue;
var totalYNomber;
// 运动相关变量
var ctr, numctr, speed; // 获得canvas上下文
canvas = document.getElementById("chart");
if(canvas && canvas.getContext){
ctx = canvas.getContext("2d");
}
initChart(); // 图表初始化 // 图表初始化
function initChart(){
// 图表信息
cMargin = 60;
cSpace = 80;
/*这里是对高清屏幕的处理，
方法：先将canvas的width 和height设置成本来的两倍（本来希望的宽度为 window的宽度减去100px）
然后将style.height 和 style.width设置成本来的宽高
这样相当于把两倍的东西缩放到原来的大小，这样在高清屏幕上 一个像素的位置就可以有两个像素的值
这样需要注意的是所有的宽高间距，文字大小等都得设置成原来的两倍才可以。
*/
canvas.width = Math.floor( (window.innerWidth-100)/2 ) * 2 ;
canvas.height = 740;
canvas.style.height = canvas.height/2 + "px";
canvas.style.width = canvas.width/2 + "px";
cHeight = canvas.height - cMargin - cSpace;
cWidth = canvas.width - cMargin - cSpace;
originX = cMargin + cSpace;
originY = cMargin + cHeight; // 折线图信息
tobalDots = dataArr.length;
dotSpace = parseInt( cWidth/tobalDots );
maxValue = 0;
for(var i=0; i<dataArr.length; i++){
var dotVal = parseInt( dataArr[i][1] );
if( dotVal > maxValue ){
maxValue = dotVal;
}
}
maxValue += 50;
totalYNomber = 10;
// 运动相关
ctr = 1;
numctr = 100;
speed = 6; ctx.translate(0.5,0.5); // 当只绘制1像素的线的时候，坐标点需要偏移，这样才能画出1像素实线
}
--绘制图表的轴和标记 （接着上一步的代码写在 goChart方法中 ）
drawLineLabelMarkers(); // 绘制图表轴、标签和标记
// 绘制图表轴、标签和标记
function drawLineLabelMarkers(){
ctx.font = "24px Arial";
ctx.lineWidth = 2;
ctx.fillStyle = "#566a80";
ctx.strokeStyle = "#566a80";
// y轴
drawLine(originX, originY, originX, cMargin);
// x轴
drawLine(originX, originY, originX+cWidth, originY);
// 绘制标记
drawMarkers();
}
// 画线的方法
function drawLine(x, y, X, Y){
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(X, Y);
ctx.stroke();
ctx.closePath();
}
// 绘制标记
function drawMarkers(){
ctx.strokeStyle = "#E0E0E0";
// 绘制 y 轴 及中间横线
var oneVal = parseInt(maxValue/totalYNomber);
ctx.textAlign = "right";
for(var i=0; i<=totalYNomber; i++){
var markerVal = i*oneVal;
var xMarker = originX-5;
var yMarker = parseInt( cHeight*(1-markerVal/maxValue) ) + cMargin;
ctx.fillText(markerVal, xMarker, yMarker+3, cSpace); // 文字
if(i>0){
drawLine(originX+2, yMarker, originX+cWidth, yMarker);
}
}
// 绘制 x 轴 及中间竖线
ctx.textAlign = "center";
for(var i=0; i<tobalDots; i++){
var markerVal = dataArr[i][0];
var xMarker = originX+i*dotSpace;
var yMarker = originY+30;
ctx.fillText(markerVal, xMarker, yMarker, cSpace); // 文字
if(i>0){
drawLine(xMarker, originY-2, xMarker, cMargin );
}
}
// 绘制标题 y
ctx.save();
ctx.rotate(-Math.PI/2);
ctx.fillText("访问量", -canvas.height/2, cSpace-10);
ctx.restore();
// 绘制标题 x
ctx.fillText("月份", originX+cWidth/2, originY+cSpace/2+20);
};
-- 绘制折线图（接着上一步的代码写在 goChart方法中 ）
drawLineAnimate(); // 绘制折线图的动画
//绘制折线图
function drawLineAnimate(){
ctx.strokeStyle = "#566a80"; //"#49FE79";
//连线
ctx.beginPath();
for(var i=0; i<tobalDots; i++){
var dotVal = dataArr[i][1];
var barH = parseInt( cHeight*dotVal/maxValue* ctr/numctr );//
var y = originY - barH;
var x = originX + dotSpace*i;
if(i==0){
ctx.moveTo( x, y );
}else{
ctx.lineTo( x, y );
}
}
ctx.stroke();
//背景
ctx.lineTo( originX+dotSpace*(tobalDots-1), originY);
ctx.lineTo( originX, originY);
//背景渐变色
//柱状图渐变色
var gradient = ctx.createLinearGradient(0, 0, 0, 300);
gradient.addColorStop(0, 'rgba(133,171,212,0.6)');
gradient.addColorStop(1, 'rgba(133,171,212,0.1)');
ctx.fillStyle = gradient;
ctx.fill();
ctx.closePath();
ctx.fillStyle = "#566a80";
//绘制点
for(var i=0; i<tobalDots; i++){
var dotVal = dataArr[i][1];
var barH = parseInt( cHeight*dotVal/maxValue * ctr/numctr );
var y = originY - barH;
var x = originX + dotSpace*i;
drawArc( x, y ); //绘制点
ctx.fillText(parseInt(dotVal*ctr/numctr), x+15, y-8); // 文字
}
if(ctr<numctr){
ctr++;
setTimeout(function(){
ctx.clearRect(0,0,canvas.width, canvas.height);
drawLineLabelMarkers();
drawLineAnimate();
}, speed);
}
}
//绘制圆点
function drawArc( x, y, X, Y ){
ctx.beginPath();
ctx.arc( x, y, 3, 0, Math.PI*2 );
ctx.fill();
ctx.closePath();
}
--当点击canvas的时候重新刷新图表（接着上一步的代码写在 goChart方法中 ）
//点击刷新图表
canvas.onclick = function(){
initChart(); // 图表初始化
drawLineLabelMarkers(); // 绘制图表轴、标签和标记
drawLineAnimate(); // 绘制折线图的动画
};
这样我们整个代码就编写完成了，为了代码更便于阅读，我们可以将所有方法放到后面，把调用方法的代码放到前面，经过调整的全部代码如下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.a{
background: #0bfefb;
}
</style>
</head>
<body>
<canvas id="chart" height="" width="" style="margin:50px"> 你的浏览器不支持HTML5 canvas </canvas> <script type="text/javascript">
function goChart(dataArr){ // 声明所需变量
var canvas,ctx;
// 图表属性
var cWidth, cHeight, cMargin, cSpace;
var originX, originY;
// 折线图属性
var tobalDots, dotSpace, maxValue;
var totalYNomber;
// 运动相关变量
var ctr, numctr, speed; // 获得canvas上下文
canvas = document.getElementById("chart");
if(canvas && canvas.getContext){
ctx = canvas.getContext("2d");
}
initChart(); // 图表初始化
drawLineLabelMarkers(); // 绘制图表轴、标签和标记
drawLineAnimate(); // 绘制折线图的动画 //点击刷新图表
canvas.onclick = function(){
initChart(); // 图表初始化
drawLineLabelMarkers(); // 绘制图表轴、标签和标记
drawLineAnimate(); // 绘制折线图的动画
}; // 图表初始化
function initChart(){
// 图表信息
cMargin = ;
cSpace = ;
/*这里是对高清屏幕的处理，
方法：先将canvas的width 和height设置成本来的两倍
然后将style.height 和 style.width设置成本来的宽高
这样相当于把两倍的东西缩放到原来的 1/2，这样在高清屏幕上 一个像素的位置就可以有两个像素的值
这样需要注意的是所有的宽高间距，文字大小等都得设置成原来的两倍才可以。
*/
canvas.width = Math.floor( (window.innerWidth-)/ ) * ;
canvas.height = ;
canvas.style.height = canvas.height/ + "px";
canvas.style.width = canvas.width/ + "px";
cHeight = canvas.height - cMargin - cSpace;
cWidth = canvas.width - cMargin - cSpace;
originX = cMargin + cSpace;
originY = cMargin + cHeight; // 折线图信息
tobalDots = dataArr.length;
dotSpace = parseInt( cWidth/tobalDots );
maxValue = ;
for(var i=; i<dataArr.length; i++){
var dotVal = parseInt( dataArr[i][] );
if( dotVal > maxValue ){
maxValue = dotVal;
}
}
maxValue += ;
totalYNomber = ;
// 运动相关
ctr = ;
numctr = ;
speed = ; ctx.translate(0.5,0.5); // 当只绘制1像素的线的时候，坐标点需要偏移，这样才能画出1像素实线
} // 绘制图表轴、标签和标记
function drawLineLabelMarkers(){
ctx.font = "24px Arial";
ctx.lineWidth = ;
ctx.fillStyle = "#566a80";
ctx.strokeStyle = "#566a80";
// y轴
drawLine(originX, originY, originX, cMargin);
// x轴
drawLine(originX, originY, originX+cWidth, originY); // 绘制标记
drawMarkers();
} // 画线的方法
function drawLine(x, y, X, Y){
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(X, Y);
ctx.stroke();
ctx.closePath();
} // 绘制标记
function drawMarkers(){
ctx.strokeStyle = "#E0E0E0";
// 绘制 y 轴 及中间横线
var oneVal = parseInt(maxValue/totalYNomber);
ctx.textAlign = "right";
for(var i=; i<=totalYNomber; i++){
var markerVal = i*oneVal;
var xMarker = originX-;
var yMarker = parseInt( cHeight*(-markerVal/maxValue) ) + cMargin; ctx.fillText(markerVal, xMarker, yMarker+, cSpace); // 文字
if(i>){
drawLine(originX+, yMarker, originX+cWidth, yMarker);
}
}
// 绘制 x 轴 及中间竖线
ctx.textAlign = "center";
for(var i=; i<tobalDots; i++){
var markerVal = dataArr[i][];
var xMarker = originX+i*dotSpace;
var yMarker = originY+;
ctx.fillText(markerVal, xMarker, yMarker, cSpace); // 文字
if(i>){
drawLine(xMarker, originY-, xMarker, cMargin );
}
}
// 绘制标题 y
ctx.save();
ctx.rotate(-Math.PI/);
ctx.fillText("访问量", -canvas.height/, cSpace-);
ctx.restore();
// 绘制标题 x
ctx.fillText("月份", originX+cWidth/, originY+cSpace/+);
}; //绘制折线图
function drawLineAnimate(){
ctx.strokeStyle = "#566a80"; //"#49FE79"; //连线
ctx.beginPath();
for(var i=; i<tobalDots; i++){
var dotVal = dataArr[i][];
var barH = parseInt( cHeight*dotVal/maxValue* ctr/numctr );//
var y = originY - barH;
var x = originX + dotSpace*i;
if(i==){
ctx.moveTo( x, y );
}else{
ctx.lineTo( x, y );
}
}
ctx.stroke(); //背景
ctx.lineTo( originX+dotSpace*(tobalDots-), originY);
ctx.lineTo( originX, originY);
//背景渐变色
//柱状图渐变色
var gradient = ctx.createLinearGradient(, , , );
gradient.addColorStop(, 'rgba(133,171,212,0.6)');
gradient.addColorStop(, 'rgba(133,171,212,0.1)');
ctx.fillStyle = gradient;
ctx.fill();
ctx.closePath();
ctx.fillStyle = "#566a80"; //绘制点
for(var i=; i<tobalDots; i++){
var dotVal = dataArr[i][];
var barH = parseInt( cHeight*dotVal/maxValue * ctr/numctr );
var y = originY - barH;
var x = originX + dotSpace*i;
drawArc( x, y ); //绘制点
ctx.fillText(parseInt(dotVal*ctr/numctr), x+, y-); // 文字
} if(ctr<numctr){
ctr++;
setTimeout(function(){
ctx.clearRect(,,canvas.width, canvas.height);
drawLineLabelMarkers();
drawLineAnimate();
}, speed);
}
} //绘制圆点
function drawArc( x, y, X, Y ){
ctx.beginPath();
ctx.arc( x, y, , , Math.PI* );
ctx.fill();
ctx.closePath();
} } var chartData = [["2017/01", ], ["2017/02", ], ["2017/03", ], ["2017/04",], ["2017/05",], ["2017/06",]];
goChart(chartData); </script>
</body>
</html>
好了，今天就讲到这里，希望大家把代码都自己敲一遍。
关注公众号，博客更新即可收到推送
canvas图表详解系列（2）：折线图的更多相关文章
- canvas图表详解系列（1）：柱状图
本章建议学习时间4小时 学习方式:详细阅读,并手动实现相关代码(如果没有canvas基础,需要先学习前面的canvas基础笔记) 学习目标:此教程将教会大家如何使用canvas绘制各种图表,详细分解步 ...
- canvas图表详解系列（4）：动态散点图
本章建议学习时间4小时 学习方式:详细阅读,并手动实现相关代码(如果没有canvas基础,需要先学习前面的canvas基础笔记) 学习目标:此教程将教会大家如何使用canvas绘制各种图表,详细分解步 ...
- canvas图表详解系列（3）：动态饼状图（原生Js仿echarts饼状图）
本章建议学习时间4小时 学习方式:详细阅读,并手动实现相关代码(如果没有canvas基础,需要先学习前面的canvas基础笔记) 学习目标:此教程将教会大家如何使用canvas绘制各种图表,详细分解步 ...
- canvas图表详解系列（5）：雷达（面积）图
雷达(面积)图 本章建议学习时间4小时 学习方式:详细阅读,并手动实现相关代码(如果没有canvas基础,需要先学习前面的canvas基础笔记) 学习目标:此教程将教会大家如何使用canvas绘制各种 ...
- Python绘制六种可视化图表详解，三维图最炫酷！你觉得呢？
Python绘制六种可视化图表详解,三维图最炫酷!你觉得呢? 可视化图表,有相当多种,但常见的也就下面几种,其他比较复杂一点,大都也是基于如下几种进行组合,变换出来的.对于初学者来说,很容易被这官网上 ...
- 【转】Android Canvas绘图详解（图文）
转自:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2012/1212/703.html Android Canvas绘图详解(图文) 泡 ...
- Android高效率编码-第三方SDK详解系列(一)——百度地图，绘制，覆盖物，导航，定位，细腻分解！
Android高效率编码-第三方SDK详解系列(一)--百度地图,绘制,覆盖物,导航,定位,细腻分解! 这是一个系列,但是我也不确定具体会更新多少期,最近很忙,主要还是效率的问题,所以一些有效的东西还 ...
- Android高效率编码-第三方SDK详解系列(三)——JPush推送牵扯出来的江湖恩怨，XMPP实现推送，自定义客户端推送
Android高效率编码-第三方SDK详解系列(三)--JPush推送牵扯出来的江湖恩怨,XMPP实现推送,自定义客户端推送 很久没有更新第三方SDK这个系列了,所以更新一下这几天工作中使用到的推送, ...
- 源码详解系列(六) ------ 全面讲解druid的使用和源码
简介 druid是用于创建和管理连接,利用"池"的方式复用连接减少资源开销,和其他数据源一样,也具有连接数控制.连接可靠性测试.连接泄露控制.缓存语句等功能,另外,druid还扩展 ...
随机推荐
- MPLS VPN随堂笔记2
深入理解ospf 理解MPLS VPN 中对OSPF 层次化设计的补充 supper backbone area 2:理解MPLS VPN 中OSPF 的区域设计概念 3:理解MPLS VPN 中OS ...
- 团队作业4——第一次项目冲刺 FiFtH DaY
项目冲刺--Penta Kill 很开心,小编今天LOL也拿到了五杀,感觉自己又可以去吹一年了. 不扯这些有的没的了,让我们来看看今天的任务吧~ Mission 看起来好像和昨天没有什么不同哦,其实是 ...
- 结对作业1----基于GUI的四则运算生成器
组员:201421123015 陈麟凤 201421123019 张志杰 201421123020 黄海鸿 coding 地址:代码点这里 需求分析: 1.除了整数的四则运算还要支持分数的四则运算: ...
- 201521123008《Java程序设计》第二周实验总结
本周学习总结 ① 数据类型,其中char是占用两个字节的内存空间,其他和以前学过的一样.除了十进制位,整型也可以用八进制或者十六进制表示.浮点型不精确. ②运算符,算术,赋值,逻辑,位运算. ③str ...
- 201521123005 《Java程序设计》 第十一周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 Q1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) ...
- 201521123006 《java程序设计》 第9周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号) **1.2 ...
- 201521123066 《Java程序设计》第十四周学习总结
1. 本周学习总结 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自己的学号.姓名) 在自己建立的数据库上执行常见SQL语句(截图) - ...
- Ajax【介绍、入门、解决Ajax中文、跨域、缓存】
什么是Ajax Ajax(Asynchronous JavaScript and XML) 异步JavaScript和XML Ajax实际上是下面这几种技术的融合: (1)XHTML和CSS的基于标准 ...
- Java数据库连接泄漏应对办法-基于Weblogic服务器
临时解决连接泄漏方案 当连接泄漏真的发生了,无可避免时,我们采取以下方案,可临时解决连接问题,以争取修改代码的时间. 步骤1:选择待分析的JNDI数据源 步骤2(可选):可配置最大数据连接数量 步骤3 ...
- 获取sd卡的总大小和可用大小