k线

最新推荐文章于 2020-06-01 04:27:28 发布

风的中心

最新推荐文章于 2020-06-01 04:27:28 发布

阅读量482

点赞数

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

版权

<!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-left: 15px;
}
</style>
</head>

<body>
<canvas id="mycanvas">
</canvas>
<script src="../js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="../js/data.js" type="text/javascript"></script>
<script type="text/javascript">
var Kchart = {
init: function() {
var self = this,
data = [];
console.log("页面初始化");
//绘制5分钟k线
data = self.new_array(kc);
self.draw(data);
},
new_array: function(list) {
var len = list.length,
arr = [];
for (var i = len - 30; i <= len; i++) {
arr.push(list[i]);
};
return arr;
},
draw: function(data) {
var body = $("body"),
scWidth = body.css("width"),
scHeight = body.css("height"),
canvas = document.getElementById("mycanvas"),
ctx = canvas.getContext("2d"),
list = data;
//设置canvas 大小
canvas.height = 420;
canvas.width = (parseInt(scWidth, 10) - 29) * 2;
//防止模糊
canvas.style.height = "210px";
canvas.style.width = (parseInt(scWidth, 10) - 29) + "px";
//画k线
this.draw_k(ctx, list, (parseInt(scWidth, 10) - 29) * 2);
//画x轴
this.drawX(ctx, (parseInt(scWidth, 10) - 30) * 2);
this.drawY(ctx, (parseInt(scWidth, 10) - 30) * 2, 360);
//文字
this.drawTextX(ctx);
this.drawTextY(ctx, (parseInt(scWidth, 10) - 30) * 2, 360);
},
drawX: function(ctx, width) {
for (var i = 0; i < 4; i++) {
ctx.beginPath();
ctx.strokeStyle = "#C0C0C0";
ctx.lineWidth = 1;
ctx.moveTo(50.5, 50 + i * 100 + 0.5);
ctx.lineTo(width + 0.5, 50 + i * 100 + 0.5);
ctx.stroke();
ctx.save();
ctx.restore();
}

},
drawY: function(ctx, width, height) {
ctx.beginPath();
ctx.strokeStyle = "#C0C0C0";
ctx.lineWidth = 1;
ctx.moveTo(50.5, 50.5);
ctx.lineTo(50.5, height - 8 + 0.5);
ctx.stroke();
ctx.save();
ctx.restore();

ctx.beginPath();
ctx.strokeStyle = "#C0C0C0";
ctx.lineWidth = 1;
ctx.moveTo(width + 0.5, 50.5);
ctx.lineTo(width + 0.5, height - 8 + 0.5);
ctx.stroke();
ctx.save();
ctx.restore();
},
//文字
drawTextX: function(ctx) {
var textList = ["422", "421", "420", "419"];
for (var i = 0; i < 4; i++) {
ctx.font = "20px Arial";
ctx.textAlign = "end";
ctx.fillStyle = "#906078";
ctx.fillText(textList[i], 50, 50 + i * 100);
};
},
drawTextY: function(ctx, width, height) {
var space = (width - 50) / 8,
textList = ["", "9:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00"];
for (var i = 0; i < 9; i++) {
ctx.font = "20px Arial";
ctx.textAlign = "end";
ctx.fillStyle = "#906078";
ctx.textBaseline = "top";
ctx.fillText(textList[i], 50 + i * space, height);
}

},
draw_k: function(ctx, data, width) {

var space = (width - 50) / 30,
max = 422,
top = 50,
maxIndex = 0,
minIndex = 0,
opening = 0,
closed = 0,
color = "";
for (var i = 0; i < 30; i++) {
maxIndex = (max - data[i][2]) * 100 + 50;
minIndex = (max - data[i][3]) * 100 + 50;
if (data[i][1] < data[i][4]) {
opening = (max - data[i][4]) * 100 + 50;
color = "#FF0003";
} else {
opening = (max - data[i][1]) * 100 + 50;
color = "#5AA109";
}

closed = Math.abs((data[i][1] - data[i][4]) * 100);
//画正方形
ctx.rect(parseInt((56 + i * space), 10) + 0.5, parseInt(opening, 10) + 0.5, 6, closed);
ctx.fillStyle = color;
ctx.fill();
ctx.save();
ctx.restore();
//画线
ctx.beginPath();
ctx.strokeStyle = color; // 蓝色路径
ctx.lineWidth = 1;
ctx.moveTo(parseInt((59 + i * space), 10) + 0.5, maxIndex);
ctx.lineTo(parseInt((59 + i * space), 10) + 0.5, minIndex);
ctx.stroke(); // 进行绘制
ctx.save();
ctx.restore();
}

}
};
$(function() {
Kchart.init();
});
</script>
</body>

</html>