<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
.wrap{width:990px;zoom:1;margin:auto;}
body{margin:4px;}
BODY, A, P, SPAN, TD{font-family: Arial, "宋体";font-size: 14px;}
h1{margin:0 0 10px 10px;border-bottom: 1px solid #f0f0f0;padding: 0px 20px 5px 10px;}
h1 a{font-family:"微软雅黑", "黑体";font-size: 18px;color:black;text-decoration:none}
h2{font-family:"微软雅黑", "黑体";font-size: 16px;margin: 10px 0 5px 2px;padding: 8px 0px 0px 2px;}
pre{margin:4px;padding: 5px 0 0 30px!important;color: gray;font-size: .8em;line-height: 20px;}
.foot{text-align:center}
.foot a {font-size:9pt}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
<title>k line painter</title>
<script src="libs/loading.js" type="text/javascript" charset="utf-8"></script>
<script src="libs/util.js" type="text/javascript" charset="utf-8"></script>
<script src="libs/absPainter.js" type="text/javascript" charset="utf-8"></script>
<script src="libs/ajax.js" type="text/javascript" charset="utf-8"></script>
<script src="libs/crossLines.js" type="text/javascript" charset="utf-8"></script>
<script src="libs/axis-x.js" type="text/javascript" charset="utf-8"></script>
<script src="libs/tip.js" type="text/javascript" charset="utf-8"></script>
<script src="libs/linepainter.js" type="text/javascript" charset="utf-8"></script>
<script src="libs/volumePainter.js" type="text/javascript" charset="utf-8"></script>
<script src="libs/axis-y.js" type="text/javascript" charset="utf-8"></script>
<!-- ----网页版---- -->
<script src="libs/chartEventHelper.js?abc" type="text/javascript" charset="utf-8"></script>
<!-- ----IAPD IPHONE触摸---- -->
<!-- <script src="libs/chartEventHelper.kl.js?a2" type="text/javascript" charset="GBK"></script> -->
<script type="text/javascript" src="libs/controller.js" charset="utf-8"></script>
<script type="text/javascript">
/*
html5行情图库
author:yukaizhao
blog:http://www.cnblogs.com/yukaizhao/ http://weibo.com/yukaizhao/
参与项目或技术交流：[email protected]
*/
function convertDate(val, withWeek) {
var year = Math.ceil(val / 10000) - 1;
var day = val % 100;
var month = (Math.ceil(val / 100) - 1) % 100;
var d = new Date();
d.setYear(year);
d.setMonth(month - 1);
d.setDate(day);
if (month < 10) month = '0' + month;
if (day < 10) day = '0' + day;
if (withWeek) {
var weekNames = ['日', '一', '二', '三', '四', '五', '六'];
return year + '-' + month + '-' + day + '(星期' + weekNames[d.getDay()] + ')';
}
else {
return year + '-' + month + '-' + day;
}
}
function calcMAPrices(ks, startIndex, count, daysCn) {
var result = new Array();
for (var i = startIndex; i < startIndex + count; i++) {
var startCalcIndex = i - daysCn + 1;
if (startCalcIndex < 0) {
result.push(false);
continue;
}
var sum = 0;
for (var k = startCalcIndex; k <= i; k++) {
sum += ks[k].close;
}
var val = sum / daysCn;
result.push(val);
}
return result;
}
var timer = {
start:function(step){this.startTime = new Date();this.stepName = step;},
stop:function(){
var timeSpan = new Date().getTime() - this.startTime.getTime();
setDebugMsg(this.stepName + '耗时' + timeSpan+'ms');
}
};
function kLine(options) {
this.options = options;
this.dataRanges = null;
}
kLine.prototype = {
initialize: function (painter) {
painter.klOptions = this.options;
painter.implement = this;
},
start: function () {
//timer.start('start');
var canvas = this.canvas;
var ctx = this.ctx;
this.painting = true;
var options = this.klOptions;
var clearPart = { width: canvas.width, height: options.priceLine.region.y - 3 };
ctx.clearRect(0, 0, clearPart.width, clearPart.height);
ctx.save();
window.riseColor = options.riseColor;
window.fallColor = options.fallColor;
window.normalColor = options.normalColor;
if (options.backgroundColor && !this.drawnBackground) {
ctx.beginPath();
ctx.fillStyle = options.backgroundColor;
ctx.rect(0, 0, clearPart.width, clearPart.height);
ctx.fill();
//ctx.closePath();
this.drawnBackground = true;
}
ctx.translate(options.region.x, options.region.y);
ctx.strokeStyle = options.borderColor;
ctx.beginPath();
ctx.rect(0, 0, options.region.width, options.region.height);
ctx.stroke();
//画水平底纹线
var spaceHeight = options.region.height / (options.horizontalLineCount + 1);
for (var i = 1; i <= options.horizontalLineCount; i++) {
var y = spaceHeight * i;
if (y * 10 % 10 == 0) y += .5;
this.drawHLine(options.splitLineColor, 0, y, options.region.width, 1, options.lineStyle);
}
//画垂直底纹线
var spaceWidth = options.region.width / (options.verticalLineCount + 1);
for (var i = 1; i <= options.verticalLineCount; i++) {
var w = spaceWidth * i;
if (w * 10 % 10 == 0) w += .5;
this.drawVLine(options.splitLineColor, w, 0, options.region.height, 1, options.lineStyle);
}
//timer.stop();
},
end: function () {
this.ctx.restore();
var me = this;
var options = me.klOptions;
var region = options.region;
var volumeRegion = options.volume.region;
function getIndex(x) {
x -= region.x;
var index = Math.ceil(x / (me.klOptions.spaceWidth + me.klOptions.barWidth)) - 1;
var count = me.toIndex - me.startIndex + 1;
if (index >= count) index = count - 1;
return index;
}
function getX(x) {
var index = getIndex(x);
return region.x + me.klOptions.spaceWidth * (index + 1) + me.klOptions.barWidth * index + me.klOptions.barWidth * .5;
}
function getPriceColor(ki, price) {
if (price > ki.preClose) {
return riseColor;
} else if (price < ki.preClose) {
return fallColor;
} else {
return normalColor;
}
}
function getTipHtml(x) {
var index = me.startIndex + getIndex(x);
if (index >= me.data.ks.length) index = me.data.ks.length - 1;
if (index < 0) index = 0;
var ki = me.data.ks[index];
var tipHtml = '<div><b>' + convertDate(ki.quoteTime) + '</b></div>' +
'昨收价：<font color="' + getPriceColor(ki, ki.preClose) + '">' + toMoney(ki.preClose) + '</font><br/>' +
基于html5 canvers的k线图.zip
版权申诉
42 浏览量
2024-02-12
22:42:17
上传
评论
收藏 87KB ZIP 举报
基于html5 canvers的k线图.zip （16个子文件） 
kline-master 
K线.html 37KB libs 
absPainter.js 3KB axis-x.js 1KB ajax.js 2KB volumePainter.js 3KB tip.js 5KB loading.js 3KB axis-y.js 2KB util.js 5KB linepainter.js 2KB controller.js 17KB chartEventHelper.kl.js 9KB crossLines.js 5KB chartEventHelper.js 7KB k-data.js 148KB index.html 38KB资源评论
博士僧小星
- 粉丝: 1924
- 资源: 5892
下载权益
C知道特权
VIP文章
课程特权
VIP享7折，此内容立减5.97元 开通VIP
