*YH*
- 浏览: 183219 次
- 性别:
- 来自: 广州
-
文章分类
最新评论
<!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 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 = 60;
cSpace = 80;
/*这里是对高清屏幕的处理，
方法：先将canvas的width 和height设置成本来的两倍
然后将style.height 和 style.width设置成本来的宽高
这样相当于把两倍的东西缩放到原来的 1/2，这样在高清屏幕上 一个像素的位置就可以有两个像素的值
这样需要注意的是所有的宽高间距，文字大小等都得设置成原来的两倍才可以。
*/
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像素实线
}
// 绘制图表轴、标签和标记
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);
};
//绘制折线图
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();
}
}
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>
参考：https://www.cnblogs.com/chengduxiaoc/p/7678967.html
分享到：
发表评论
-
js在网页中查看pdf文件【转】
2019-07-29 15:59 336博主地址： https://www.cnblogs.com/d ... -
canvas__2 饼状图
2018-09-29 16:03 622<!DOCTYPE html> <ht ... -
canvas__1 柱状图
2018-09-28 14:44 518<!DOCTYPE html> <ht ... -
H5实现滑动切换图片功能
2018-08-28 11:29 4438页面代码 <!DOCTYPE HTML> & ... -
div实现table功能
2018-08-03 14:20 940div布局主要用到的css属性 table 此元素会作为 ...
相关推荐
canvas画折线图
html5 canvas微信运动步数折线图代码 html5 canvas微信运动步数折线图代码
canvas绘制动态折线图的源代码，已编译成功，代码有注释
Android通过Canvas手绘一个折线图详细查看https://blog.csdn.net/Iamzgx/article/details/79824969
HTML5 Canvas微信运动步数折线图基于jquery-2.1.1.min.js制作，模拟微信运动步数折线图效果。
微信小程序完美的利用canvas做的折线图wechat_Chart-master.zip
基于安卓端的折线图绘制Demo，可选择横轴为礼拜数，月份日期，年度月份，适用性强。
用Canvas画的折线图，将坐标点输入之后就能自动绘制。
清晰简洁的api，，文件不大，但功能完善；...带坐标，节点，鼠标接触节点的动态显示坐标的事件、、、至于传值方面、所用的方式是json格式（类似数组）,可以显示多个canvas图和每个图的多个颜色的折线、、、功能可谓完全
动态绘制折线、圆柱、饼状图是一个Android仿天气类app绘制饼状图、折线图、柱状图的实现效果，效果挺不错，例子没有使用第三方类库，全部都是使用Canvas实现。
HTML5+Canvas微信运动折线图代码特效是一款基于HTML5+Canvas跟jQuery实现的某段时间内的动态折线图信息，非常有用。
HTML5 Canvas微信运动折线图特效源码是一款基于HTML5 Canvas的微信运动折线图插件wcMotionChart的代码。这款插件是网友LipsonChan在工作过程中编写的。通过该插件你可以制作出某段时间内的动态折线图信息，非常有用...
canvas-2 canvas 折线图
wcMotionChart是一款基于HTML5 Canvas的微信运动折线图jQuery插件。这款插件是网友LipsonChan在工作过程中编写的。通过该插件你可以制作出某段时间内的动态折线图信息，非常有用。
HTML5 Canvas 3D折线图表是一款基于canvas的3D折线图表，图表在初始化的时候会根据数据点把折线分割成多条线段，然后线段将逐渐悬浮到数据点对应数值的位置。由于是3D的效果，所以图表的折线也和其他折线图表的不同...
之前我们已经分享过很多HTML5图表应用了，包括折线图...今天要分享的一款HTML5 Canvas图表应用提供了折线图和柱形图两种，这款HTML5图表在初始化数据的时候有一种渐现的动画特效，我们可以将这款图表应用在统计页面上。
这是一个javascript折线图插件，非常方便、好用，亲测，可以试试
本文实例讲述了JS+html5 canvas实现的简单绘制折线图效果。分享给大家供大家参考，具体如下： 1、实例代码： <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>画图<...
主要为大家详细介绍了JavaScript canvas绘制折线图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
使用canvas实现的简单折线图，可对每个点进行图片替换，使用方便