曲线图（动画）

最新推荐文章于 2023-09-24 17:23:22 发布

风的中心

最新推荐文章于 2023-09-24 17:23:22 发布

阅读量349

点赞数

本文链接：https://blog.csdn.net/u013716510/article/details/51956997

版权

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="device-width=1.0,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,target-densitydpi = medium-dpi">
<meta name="format-detection" content="telephone=no">
<meta name="apple-touch-fullscreen" content="YES">
<meta name="apple-mobile-web-app-capable" content="yes">
<style type="text/css">
* {
padding: 0;
margin: 0;
}

html,
body {
width: 100%;
height: 100%;
}

canvas {
margin-top: 20px;
}
</style>
</head>

<body>
<canvas id="mycanvas" width="300" height="200">
</canvas>
<script src="../js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="../js/hidpi-canvas.js" type="text/javascript"></script>
<script src="../js/data.js" type="text/javascript"></script>
<script type="text/javascript">
var chart = {
draw: function() {
var canvas = document.getElementById("mycanvas"),
ctx = null,
scwidth = parseFloat($("body").css("width"), 10),
data = [];
//设置canvas宽度
canvas.width = scwidth;
canvas.height = 142;
ctx = canvas.getContext("2d");

data = chart.new_arrays(kc);

chart.drawX(ctx, 142, scwidth);
chart.drawY(ctx, 142, scwidth);

chart.drawTAG(ctx, 142, scwidth);

chart.drawCurve(ctx, 142, scwidth, data);
},
new_arrays: function(list) {
var len = list.length,
arr = [];
for (var i = len - 60; i <= len; i++) {
arr.push(list[i]);
};
return arr;
},
drawX: function(ctx, height, width) {
var space = (height - 2) / 4;
for (var i = 0; i < 6; i++) {
ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = "#F1F1F1";
if (i == 2) {
ctx.drawDashLine(0, i * space + 1, width, i * space + 1, 5);
} else {
ctx.moveTo(0, i * space + 1);
ctx.lineTo(width, i * space + 1);
ctx.stroke();
}
ctx.save();
ctx.restore();
}
},
drawY: function(ctx, height, width) {
var space = (width - 2) / 6;
for (var i = 1; i < 6; i++) {
ctx.beginPath();
ctx.lineWidth = 1;
ctx.strokeStyle = "#F1F1F1";
ctx.moveTo(1 + i * space, 0);
ctx.lineTo(1 + i * space, height);
ctx.stroke();
ctx.save();
ctx.restore();
}
},
drawTAG: function(ctx, height, width) {
ctx.beginPath();
ctx.lineWidth = 1;
ctx.strokeStyle = "#FB8585";
ctx.moveTo(width - 10 + 0.5, 10);
ctx.lineTo(width - 10 + 0.5, height / 2);
ctx.stroke();
ctx.save();
ctx.restore();

ctx.beginPath();
ctx.lineWidth = 1;
ctx.strokeStyle = "#77DC53";
ctx.moveTo(width - 10 + 0.5, height / 2);
ctx.lineTo(width - 10 + 0.5, height - 10);
ctx.stroke();
ctx.save();
ctx.restore();

ctx.font = "12px Arial";
ctx.textAlign = "end";
ctx.fillStyle = "#FB8585";
ctx.textBaseline = "top";
ctx.fillText("涨", width - 14 + 0.5, 6);

ctx.font = "12px Arial";
ctx.textAlign = "end";
ctx.fillStyle = "#77DC53";
ctx.textBaseline = "top";
ctx.fillText("跌", width - 14 + 0.5, height - 24);
},
drawCurve: function(ctx, height, width, data) {
var space = (width - 2) / 60,
max = 423,
unit = (height - 2) / 5,
openIndex = data[0][1],
closeIndex = 420.28;

ctx.beginPath();
ctx.lineWidth = 1;
ctx.strokeStyle = "#88B7E3";
ctx.lineJoin = "round";
ctx.lineCap = 'square';
ctx.moveTo(1, (max - openIndex) * unit);
chart.drawAn(ctx, data, space, max, openIndex, closeIndex, unit);
ctx.stroke();
ctx.save();
ctx.restore();

//渐变效果
var my_gradient = ctx.createLinearGradient(0, 0, 0, 170);
my_gradient.addColorStop(0, "#D2ECF9");
my_gradient.addColorStop(1, "white");

ctx.beginPath();
ctx.lineWidth = 1;
ctx.globalAlpha = 0.5;
ctx.fillStyle = my_gradient;
ctx.lineJoin = "round";
ctx.lineCap = 'square';
ctx.moveTo(1, height);
chart.drawAn(ctx, data, space, max, openIndex, closeIndex, unit);
ctx.lineTo(space * 59, height);
ctx.closePath()
ctx.fill();
ctx.save();
ctx.restore();

//结束亮点
closeIndex = data[59][4];
ctx.beginPath();
ctx.fillStyle = "rgba(120,180,240,0.24)";
ctx.arc(space * 59, (max - closeIndex) * unit, 4, 0, 2 * Math.PI);
ctx.fill();
ctx.save();
ctx.restore();

//结束亮点
ctx.beginPath();
ctx.fillStyle = "#78b5f0";
ctx.arc(space * 59, (max - closeIndex) * unit, 3, 0, 2 * Math.PI);
ctx.fill();
ctx.save();
ctx.restore();

chart.drawEndAn(ctx, space * 59, (max - closeIndex) * unit);

},
drawAn: function(ctx, data, space, max, openIndex, closeIndex, unit) {
for (var i = 0; i < 60; i++) {
openIndex = data[i][1];
closeIndex = data[i][4];
ctx.lineTo(space * i, (max - openIndex) * unit);
ctx.lineTo(space * i, (max - closeIndex) * unit);
};
},
drawEndAn: function(ctx, x, y) {
var index = 1;

setInterval(function() {
//剪裁圆形
ctx.beginPath();
ctx.arc(x, y, 4, 0, 2 * Math.PI);
ctx.fill();
ctx.clip();
ctx.clearRect(x - 4, y - 4, 8, 8);

//结束亮点
ctx.beginPath();
ctx.fillStyle = "rgba(120,180,240,0.24)";
ctx.arc(x, y, 4, 0, 2 * Math.PI);
ctx.fill();
ctx.save();
ctx.restore();

ctx.beginPath();
ctx.fillStyle = "#78b5f0";
if (index % 2 == 0) {
ctx.arc(x, y, 2, 0, 2 * Math.PI);
} else {
ctx.arc(x, y, 3, 0, 2 * Math.PI);
}
ctx.fill();
ctx.save();
ctx.restore();
index++;
}, 300);
},
init: function() {
chart.draw();

}
};
window.onload = chart.init();
</script>
</body>

</html>