Skip to content

hqchart
hqchart

bluefrankey / hqchart
与 Fork 源项目一致

从无法访问的项目Fork

通知 5
Star 0
Fork 0
hqchart
hqchart

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 76768f10 编写于 作者: J jones
浏览文件
操作

ver 3328

上级 9743b722
隐藏空白更改
内联 并排
Showing with 425 addition and 149 deletion
webhqchart.demo/demo/phone.html
浏览文件 @ 76768f10
......@@ -2,6 +2,7 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>页面行情(K线图)</title>
<link rel="stylesheet" href="content/css/tools.css" />
<link rel="stylesheet" href="content/font/iconfont.css" />
......@@ -59,9 +60,9 @@
if (index3) aryIndex.push({"Index":index3,"Modify":false,"Change":false});
//黑色风格设置, 默认是白色风格
var blackStyle=HQChartStyle.GetStyleConfig(STYLE_TYPE_ID.BLACK_ID);
JSChart.SetStyle(blackStyle);
document.getElementById('kline').style.backgroundColor=blackStyle.BGColor;
//var blackStyle=HQChartStyle.GetStyleConfig(STYLE_TYPE_ID.BLACK_ID);
//JSChart.SetStyle(blackStyle);
//document.getElementById('kline').style.backgroundColor=blackStyle.BGColor;
// 创建股票K线图
var jsChart=JSChart.Init(document.getElementById('kline'));
......@@ -98,16 +99,27 @@
Border: //边框
{
Left:1, //左边间距
Right:100 //右边间距
Left:100, //左边间距
Right:100, //右边间距
Bottom:20
},
Frame: //子框架设置
[
{SplitCount:3,StringFormat:1},
{SplitCount:3,StringFormat:1},
{SplitCount:3,StringFormat:1}
]
}
var windowHeight= $(window).height();
var windowWidth = $(window).width();
if (windowWidth<=420) //手机小屏左右不显示坐标
{
option.Border.Left=1;
option.Border.Right=1;
option.KLine.IsShowTooltip=false;
}
jsChart.SetOption(option);
//jsChart.LockIndex('飞龙四式',unlockIndex);
......@@ -122,6 +134,7 @@
{
console.log(indexName);
}
</script>
</body>
</html>
\ No newline at end of file
webhqchart.demo/demo/phone13.html
浏览文件 @ 76768f10
......@@ -5,94 +5,127 @@
<title>K线训练网页版</title>
<link rel="stylesheet" href="content/css/tools.css" />
<link rel="stylesheet" href="content/font/iconfont.css" />
<link rel="stylesheet" href="plugins/code_color/codemirror.css" />
<link rel="stylesheet" href="content/css/phone7.tools.css" />
<link rel="stylesheet" href="plugins/bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="plugins/bootstrap/custom.min.css" />
<link rel="stylesheet" href="content/css/phone13.tools.css" />
</head>
<body>
<div id="kline" style="width: 900px;height:400px;position: relative;"></div>
<div class="tools">
<div id="tools_top" class="top">
<span>指标名称：</span>
<input class="input" v-model="indexName" />
<select class="changeIndex" v-model="changeIndex">
<option value="1">副图</option>
<option value="0">主图</option>
</select>
<button class="toolsButton" v-on:click="execute()">执行</button>
<button class="toolsButton" onclick="Root.table.clear()">清空参数</button>
<span >股票代码：</span>
<input class="input" v-model="symbol" />
<button class="toolsButton" v-on:click="change()">切换股票</button>
<label v-on:click="changeDebug()">
<input type="checkbox" v-model="isDebug" />
<span style="margin-top:-2px;">输出调试信息</span>
</label>
<button class="toolsButton" v-on:click="save()">保存</button>
<a href="http://opensourcecdn.zealink.com/cache/webcache/hqfunctionhelp/index.html#/13" target="_blank">函数帮助</a>
</div>
<div class="table" id="tools_table">
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th align="left">参数</th>
<th align="left">最小</th>
<th align="left">最大</th>
<th align="left">缺省</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in list">
<td v-on:click="closeEdit(index,'name')">
<input v-if="item.name.isEdit" v-model="item.name.value" v-on:click.stop="" />
<span v-else=v-else v-on:click.stop="openEdit(index,'name')">{{item.name.value}}</span>
</td>
<td v-on:click="closeEdit(index,'min')">
<input v-if="item.min.isEdit" v-model="item.min.value" v-on:click.stop="" />
<span v-else=v-else v-on:click.stop="openEdit(index,'min')">{{item.min.value}}</span>
</td>
<td v-on:click="closeEdit(index,'max')">
<input v-if="item.max.isEdit" v-model="item.max.value" v-on:click.stop="" />
<span v-else=v-else v-on:click.stop="openEdit(index,'max')">{{item.max.value}}</span>
</td>
<td v-on:click="closeEdit(index,'value')">
<input v-if="item.value.isEdit" v-model="item.value.value" v-on:click.stop="" />
<span v-else=v-else v-on:click.stop="openEdit(index,'value')">{{item.value.value}}</span>
</td>
</tr>
</tbody>
</table>
<div id="kline" style="width: 900px;height:400px;position: relative;float:left;"></div>
<div id="tools" class="tools">
<div class="row">
<div class="col-md-3 col-sm-12 col-xs-12 ">
<button type="button" class="btn btn-info btn-xs" v-on:click="nextKLine()">下一K线</button>
</div>
<div class="col-md-5 col-sm-12 col-xs-12">
<div class="checkbox" style="margin:0px;">
<label>
<input type="checkbox" v-model="kLineAuto" /> K线自动前进
</label>
</div>
</div>
<div class="col-md-4 col-sm-12 col-xs-12" style="padding-left:0px;">
还剩<span style="color:#EE1515;">{{SurplusKLineCount}}</span>根K线
</div>
</div>
<div class="code">
<textarea id="tools_code"></textarea>
<div class="row" style="margin-top:20px;">
<div class="col-md-6 col-sm-12 col-xs-12">
<button type="button" class="btn pull-right" v-bind:class="buyOrSellState == 0?'btn-danger':'btn-dark'" v-bind:disabled="buyOrSellState != 0" v-on:click="buyOrSell()">&nbsp;&nbsp;&nbsp;&nbsp;买&nbsp;&nbsp;&nbsp;&nbsp;</button>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<button type="button" class="btn" v-bind:class="buyOrSellState == 1?'btn-danger':'btn-dark'" v-bind:disabled="buyOrSellState != 1" v-on:click="buyOrSell()">&nbsp;&nbsp;&nbsp;&nbsp;卖&nbsp;&nbsp;&nbsp;&nbsp;</button>
</div>
</div>
<div class="cache" id="tools_cache">
<ul>
<li v-bind:class="{ active: index == activeIndex }" v-for="(item, index) in list" v-on:click="select(index)">
{{item.name}}
<span v-on:click.stop="_delete(index)">删除</span>
</li>
</ul>
<div class="row">
<div class="list">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>标志</th>
<th>现价</th>
<th>盈亏情况</th>
<th>盈亏比例</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in list" v-bind:class="item.profitAndLossClass">
<td scope="row">{{index+1}}</td>
<td>{{item.op}}</td>
<td>{{item.price}}</td>
<td>{{item.profitAndLoss}}</td>
<td>{{item.profitAndLossRatio}}<i v-if="item.profitAndLossRatio != ''">%</i></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="modal fade" id="modal_result" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">训练结果</h4>
</div>
<div class="modal-body">
<div class="form-horizontal form-label-left">
<div class="form-group">
<label class="control-label col-md-5 col-sm-5 col-xs-12">训练时间：</label>
<div class="col-md- col-sm-7 col-xs-12">
<label class="control-label">{{date}}</label>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-5 col-sm-5 col-xs-12" for="last-name">训练股票：</label>
<div class="col-md-7 col-sm-7 col-xs-12">
<label class="control-label">{{name}}&nbsp;&nbsp;{{symbol}}</label>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-5 col-sm-5 col-xs-12">K线时间：</label>
<div class="col-md-7 col-sm-7 col-xs-12">
<label class="control-label">{{kLineDate.startDate}}&nbsp;&nbsp;至&nbsp;&nbsp;{{kLineDate.endDate}}</label>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-5 col-sm-5 col-xs-12">区间涨幅：</label>
<div class="col-md-7 col-sm-7 col-xs-12">
<label class="control-label" v-bind:class="increase > 0?'profit':'loss'">{{increase}}%</label>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-5 col-sm-5 col-xs-12">成功率：</label>
<div class="col-md-7 col-sm-7 col-xs-12">
<label class="control-label">{{profitRatio}}%</label>
</div>
</div>
<!--<div class="form-group">
<label class="control-label col-md-5 col-sm-5 col-xs-12">总收益率：</label>
<div class="col-md-7 col-sm-7 col-xs-12">
<label class="control-label"></label>
</div>
</div>-->
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary pull-right ladda-button" data-style="expand-right" onclick="Common.hideModal('modal_result')">关&nbsp;&nbsp;&nbsp;&nbsp;闭</button>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="content/js/jquery.min.js"></script>
<script type="text/javascript" src="../jscommon/umychart.js"></script>
<script type="text/javascript" src="../jscommon/umychart.complier.js"></script>
<script type="text/javascript" src="../jscommon/umychart.index.data.js"></script>
<script type="text/javascript" src="plugins/code_color/codemirror.js"></script>
<script type="text/javascript" src="plugins/code_color/javascript.js"></script>
<script type="text/javascript" src="content/js/vue.js"></script>
<script type="text/javascript" src="content/js/phone7.tools.js"></script>
<script type="text/javascript" src="content/js/vue-resource.js"></script>
<script type="text/javascript" src="content/js/phone13.tools.js"></script>
<script src="plugins/bootstrap/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script>
var jsChart;
JS_EXECUTE_DEBUG_LOG=false;
......@@ -109,12 +142,15 @@
function resizeCanvas()
{
var height= $(window).height()-300; //300高度给指标编辑器
var width = $(window).width()-300;
var height= $(window).height(); //300高度给指标编辑器
var width = $(window).width();
var divKline=document.getElementById('kline');
divKline.style.width=width+'px';
divKline.style.height=height+'px';
divKline.style.width = (width - 300) + 'px';
divKline.style.height = height + 'px';
divKline.JSChart.OnSize();
$(".tools").css({ width: width - parseInt(divKline.style.width) - 10 });
$(".tools .list").height(height - 150);
}
$(function () {
......@@ -213,19 +249,16 @@
jsChart.SetOption(option);
//jsChart.LockIndex('飞龙四式',unlockIndex);
setTimeout(function(){jsChart.JSChartContainer.Run()},5000); //启动自动前进
//setTimeout(function(){jsChart.JSChartContainer.Run()},5000); //启动自动前进
//setTimeout(function(){jsChart.JSChartContainer.Stop()},30000); //停止自动前进
setTimeout(function(){jsChart.JSChartContainer.BuyOrSell()},10000); //买卖股票
//setTimeout(function(){jsChart.JSChartContainer.BuyOrSell()},10000); //买卖股票
//jsChart.JSChartContainer.MoveNextKLineData() //手动前进一个K线
resizeCanvas();
Tools.init({
script: scriptIndex.Script,
indexName: scriptIndex.Name,
args: scriptIndex.Args,
symbol: option.Symbol
trainDataCount: option.Train.DataCount
});
});
......@@ -248,13 +281,18 @@
if (trainDataCount<=0)
{
console.log('[FinishCallback] finish train. ', hqchart.BuySellData);
Root.result.setData(hqchart);
}
else
{
var op= (hqchart.GetOperator()==0 ? "买":'卖');
console.log('[FinishCallback] remain train data ', trainDataCount,op);
console.log('[FinishCallback] remain train data ', trainDataCount, op);
}
Root.tools.setBuyOrSellState(hqchart.GetOperator());
Root.tools.setData(hqchart.BuySellData);
Root.tools.setSurplusKLineCount(trainDataCount);
}
</script>
......
webhqchart.demo/demo/phone2.html
浏览文件 @ 76768f10
......@@ -2,6 +2,7 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>页面行情(走势图)</title>
<link rel="stylesheet" href="content/css/tools.css" />
<link rel="stylesheet" href="content/font/iconfont.css" />
......@@ -60,8 +61,8 @@
Border: //边框
{
Left:45, //左边间距
Right:50, //右边间距
Left:100, //左边间距
Right:100, //右边间距
Top:20
},
Frame: //子框架设置
......@@ -71,6 +72,14 @@
{SplitCount:3,StringFormat:0},
]
}
var windowHeight= $(window).height();
var windowWidth = $(window).width();
if (windowWidth<=420) //手机小屏左右不显示坐标
{
option.Border.Left=1;
option.Border.Right=1;
}
jsChart.SetOption(option);
......
webhqchart.demo/jscommon/umychart.js
浏览文件 @ 76768f10
......@@ -35,6 +35,12 @@ function JSChart(divElement)
this.CanvasElement.height=height;
this.CanvasElement.width=parseInt(this.DivElement.style.width.replace("px",""));
this.CanvasElement.style.width=this.CanvasElement.width+'px';
this.CanvasElement.style.height=this.CanvasElement.height+'px';
var pixelTatio = GetDevicePixelRatio(); //获取设备的分辨率
this.CanvasElement.height*=pixelTatio;
this.CanvasElement.width*=pixelTatio;
if (this.JSChartContainer && this.JSChartContainer.Frame)
this.JSChartContainer.Frame.SetSizeChage(true);
......@@ -42,6 +48,29 @@ function JSChart(divElement)
if (this.JSChartContainer) this.JSChartContainer.Draw();
}
//手机屏需要调整 间距
this.AdjustChartBorder=function(chart)
{
var pixelTatio = GetDevicePixelRatio(); //获取设备的分辨率
chart.Frame.ChartBorder.Left*=pixelTatio;
chart.Frame.ChartBorder.Right*=pixelTatio;
chart.Frame.ChartBorder.Top*=pixelTatio;
chart.Frame.ChartBorder.Bottom*=pixelTatio;
}
this.AdjustTitleHeight=function(chart)
{
var pixelTatio = GetDevicePixelRatio(); //获取设备的分辨率
for(let i in chart.Frame.SubFrame)
{
chart.Frame.SubFrame[i].Frame.ChartBorder.TitleHeight*=pixelTatio;
}
chart.ChartCorssCursor.TextHeight*=pixelTatio; //十字光标文本信息高度
}
//历史K线图
this.CreateKLineChartContainer=function(option)
{
......@@ -88,6 +117,8 @@ function JSChart(divElement)
if (!isNaN(option.Border.Bottom)) chart.Frame.ChartBorder.Bottom=option.Border.Bottom;
}
this.AdjustChartBorder(chart);
if (option.IsShowCorssCursorInfo==false) //取消显示十字光标刻度信息
{
chart.ChartCorssCursor.IsShowText=option.IsShowCorssCursorInfo;
......@@ -107,7 +138,7 @@ function JSChart(divElement)
{
if(option.KLineTitle.IsShowName==false) chart.TitlePaint[0].IsShowName=false;
if(option.KLineTitle.IsShowSettingInfo==false) chart.TitlePaint[0].IsShowSettingInfo=false;
if (option.KLineTitle.IsShow == false) chart.TitlePaint[0].IsShow = false;
if(option.KLineTitle.IsShow == false) chart.TitlePaint[0].IsShow = false;
}
//叠加股票
......@@ -151,6 +182,7 @@ function JSChart(divElement)
if (!isNaN(item.TitleHeight)) chart.Frame.SubFrame[i].Frame.ChartBorder.TitleHeight=item.TitleHeight;
}
this.AdjustTitleHeight(chart);
return chart;
}
......@@ -281,6 +313,7 @@ function JSChart(divElement)
if (!isNaN(option.Border.Top)) chart.Frame.ChartBorder.Top=option.Border.Top;
if (!isNaN(option.Border.Bottom)) chart.Frame.ChartBorder.Bottom=option.Border.Bottom;
}
this.AdjustChartBorder(chart);
if (option.Frame)
{
......@@ -320,6 +353,7 @@ function JSChart(divElement)
if (!isNaN(item.TitleHeight)) chart.Frame.SubFrame[2+parseInt(i)].Frame.ChartBorder.TitleHeight=item.TitleHeight;
}
this.AdjustTitleHeight(chart);
return chart;
}
......@@ -707,9 +741,10 @@ JSChart.SetStyle=function(option)
if (option) g_JSChartResource.SetStyle(option);
}
JSChart.FlexibleFontSize=function()
//获取设备分辨率比
JSChart.GetDevicePixelRatio=function()
{
g_JSChartResource.FlexibleFontSize();
return GetDevicePixelRatio();
}
/*//把给外界调用的方法暴露出来
......@@ -1008,6 +1043,7 @@ function JSChartContainer(uielement)
this.GetToucheData=function(e, isForceLandscape)
{
var touches=new Array();
var pixelTatio = GetDevicePixelRatio(); //获取设备的分辨率
for(var i=0; i<e.touches.length; ++i)
{
var item=e.touches[i];
......@@ -1015,7 +1051,7 @@ function JSChartContainer(uielement)
{
touches.push(
{
clientX:item.clientY, clientY:item.clientX,
clientX:item.clientY*pixelTatio, clientY:item.clientX*pixelTatio,
pageX:item.pageY, pageY:item.pageX
});
}
......@@ -1023,7 +1059,7 @@ function JSChartContainer(uielement)
{
touches.push(
{
clientX:item.clientX, clientY:item.clientY,
clientX:item.clientX*pixelTatio, clientY:item.clientY*pixelTatio,
pageX:item.pageX, pageY:item.pageY
});
}
......@@ -1206,6 +1242,7 @@ function JSChartContainer(uielement)
if (item.IsDrawFirst)
item.Draw();
}
for(var i in this.ChartPaint)
{
var item=this.ChartPaint[i];
......@@ -1233,6 +1270,7 @@ function JSChartContainer(uielement)
item.Draw();
}
this.Frame.DrawInsideHorizontal();
this.Frame.DrawLock();
this.Frame.Snapshot();
......@@ -1800,6 +1838,11 @@ function JSChartContainer(uielement)
}
}
function GetDevicePixelRatio()
{
return window.devicePixelRatio || 1;
}
function OnKeyDown(e)
{
if(this.JSChartContainer)
......@@ -2200,6 +2243,46 @@ function AverageWidthFrame()
}
}
//Y刻度画在左边内部
this.DrawInsideHorizontal = function ()
{
if (this.IsHScreen===true) return; //横屏不画
var left = this.ChartBorder.GetLeft();
var right = this.ChartBorder.GetRight();
var bottom = this.ChartBorder.GetBottom();
var top = this.ChartBorder.GetTopEx();
var borderRight = this.ChartBorder.Right;
var borderLeft = this.ChartBorder.Left;
var titleHeight = this.ChartBorder.TitleHeight;
if (borderLeft >= 10) return;
var yPrev = null; //上一个坐标y的值
for (var i = this.HorizontalInfo.length - 1; i >= 0; --i) //从上往下画分割线
{
var item = this.HorizontalInfo[i];
var y = this.GetYFromData(item.Value);
if (y != null && Math.abs(y - yPrev) < 15) continue; //两个坐标在近了 就不画了
//坐标信息 左边 间距小于10 画在内部
if (item.Message[0] != null && borderLeft < 10)
{
if (item.Font != null) this.Canvas.font = item.Font;
this.Canvas.fillStyle = item.TextColor;
this.Canvas.textAlign = "left";
if (y >= bottom - 2)
this.Canvas.textBaseline = 'bottom';
else if (y <= top + 2)
this.Canvas.textBaseline = 'top';
else
this.Canvas.textBaseline = "middle";
this.Canvas.fillText(item.Message[0], left + 1, y);
}
yPrev = y;
}
}
this.GetXFromIndex=function(index)
{
var count=this.XPointCount;
......@@ -3081,6 +3164,16 @@ function HQTradeFrame()
item.Frame.DrawLock();
}
}
this.DrawInsideHorizontal = function ()
{
for (var i in this.SubFrame)
{
var item = this.SubFrame[i];
if (item.Frame.DrawInsideHorizontal) item.Frame.DrawInsideHorizontal();
}
}
this.SetSizeChage=function(sizeChange)
{
this.SizeChange=sizeChange;
......@@ -7064,9 +7157,10 @@ function ChartBuySell()
this.newMethod();
delete this.newMethod;
this.LastDataIcon={Color:'rgb(0,0,205)',Text:'↓'};
this.BuyIcon={Color:'rgb(0,0,205)',Text:'B'};
this.SellIcon={Color:'rgb(0,0,205)',Text:'S'};
this.TextFont=g_JSChartResource.KLineTrain.Font; //"bold 14px arial"; //买卖信息字体
this.LastDataIcon=g_JSChartResource.KLineTrain.LastDataIcon; //{Color:'rgb(0,0,205)',Text:'↓'};
this.BuyIcon=g_JSChartResource.KLineTrain.BuyIcon; //{Color:'rgb(0,0,205)',Text:'B'};
this.SellIcon=g_JSChartResource.KLineTrain.SellIcon; //{Color:'rgb(0,0,205)',Text:'S'};
this.BuySellData=new Map(); //{Date:日期, Op:买/卖 0=buy 1=sell}
this.LastData={}; //当前屏最后一个数据
......@@ -7081,6 +7175,7 @@ function ChartBuySell()
if (isHScreen===true) chartright=this.ChartBorder.GetBottom();
var xPointCount=this.ChartFrame.XPointCount;
this.Canvas.font=this.TextFont;
for(var i=this.Data.DataOffset,j=0;i<this.Data.Data.length && j<xPointCount;++i,++j)
{
var value=this.Data.Data[i];
......@@ -8104,6 +8199,14 @@ function ChartCorssCursor()
this.Canvas.fillStyle=this.TextColor;
this.Canvas.fillText(text,x+1,bottom+2,textWidth);
}
else if (x+textWidth/2>=right)
{
this.Canvas.fillRect(right-textWidth,bottom+2,textWidth,this.TextHeight);
this.Canvas.textAlign="right";
this.Canvas.textBaseline="top";
this.Canvas.fillStyle=this.TextColor;
this.Canvas.fillText(text,right-2,bottom+2,textWidth);
}
else
{
this.Canvas.fillRect(x-textWidth/2,bottom+2,textWidth,this.TextHeight);
......@@ -10033,8 +10136,8 @@ function JSChartResource()
this.Minute.AvPriceColor="rgb(238,127,9)";
this.DefaultTextColor="rgb(43,54,69)";
this.DefaultTextFont='14px 微软雅黑';
this.TitleFont='13px 微软雅黑';
this.DefaultTextFont=14*GetDevicePixelRatio() +'px 微软雅黑';
this.TitleFont=13*GetDevicePixelRatio() +'px 微软雅黑';
this.UpTextColor="rgb(238,21,21)";
this.DownTextColor="rgb(25,158,0)";
......@@ -10044,12 +10147,12 @@ function JSChartResource()
this.FrameBorderPen="rgb(225,236,242)";
this.FrameSplitPen="rgb(225,236,242)"; //分割线
this.FrameSplitTextColor="rgb(117,125,129)"; //刻度文字颜色
this.FrameSplitTextFont="14px 微软雅黑"; //坐标刻度文字字体
this.FrameSplitTextFont=14*GetDevicePixelRatio() +"px 微软雅黑"; //坐标刻度文字字体
this.FrameTitleBGColor="rgb(246,251,253)"; //标题栏背景色
this.CorssCursorBGColor="rgb(43,54,69)"; //十字光标背景
this.CorssCursorTextColor="rgb(255,255,255)";
this.CorssCursorTextFont="14px 微软雅黑";
this.CorssCursorTextFont=14*GetDevicePixelRatio() +"px 微软雅黑";
this.CorssCursorPenColor="rgb(130,130,130)"; //十字光标线段颜色
this.LockBGColor = "rgb(220, 220, 220)";
......@@ -10059,7 +10162,7 @@ function JSChartResource()
this.CacheDomain="https://opensourcecache.zealink.com"; //缓存域名
this.KLine={
MaxMin: {Font:'12px 微软雅黑',Color:'rgb(43,54,69)'}, //K线最大最小值显示
MaxMin: {Font:12*GetDevicePixelRatio() +'px 微软雅黑',Color:'rgb(43,54,69)'}, //K线最大最小值显示
Info: //信息地雷
{
Investor:
......@@ -10140,6 +10243,14 @@ function JSChartResource()
"rgb(105,105,105)",
];
this.KLineTrain =
{
Font:'bold 14px arial',
LastDataIcon: {Color:'rgb(0,0,205)',Text:'⬇'},
BuyIcon: {Color:'rgb(0,205,102 )',Text:'B'},
SellIcon: {Color:'rgb(255,127,36 )',Text:'S'}
};
//自定义风格
this.SetStyle=function(style)
{
......@@ -10158,7 +10269,7 @@ function JSChartResource()
if (style.DefaultTextColor) this.DefaultTextColor = style.DefaultTextColor;
if (style.DefaultTextFont) this.DefaultTextFont = style.DefaultTextFont;
if (style.DynamicTitleFont) this.DynamicTitleFont = style.DynamicTitleFont;
if (style.TitleFont) this.TitleFont = style.TitleFont;
if (style.UpTextColor) this.UpTextColor = style.UpTextColor;
if (style.DownTextColor) this.DownTextColor = style.DownTextColor;
if (style.UnchagneTextColor) this.UnchagneTextColor = style.UnchagneTextColor;
......@@ -10188,12 +10299,6 @@ function JSChartResource()
this.DrawPicture.PointColor = style.DrawPicture.PointColor;
}
}
//手机端动态调整字体大小
this.FlexibleFontSize=function()
{
this.TitleFont='14px 微软雅黑';
}
}
var g_JSChartResource=new JSChartResource();
......
webhqchart.demo/jscommon/umychart.style.js
浏览文件 @ 76768f10
/*
不同风格行情配置文件
!!手机上字体大小需要*分辨率比
*/
function GetDevicePixelRatio()
{
return window.devicePixelRatio || 1;
}
//黑色风格
var BLACK_STYLE=
......@@ -27,10 +32,8 @@ var BLACK_STYLE=
DefaultTextColor: "rgb(101,104,112)",
DefaultTextFont: '14px 微软雅黑',
DynamicTitleFont: '12px 微软雅黑', //指标动态标题字体
DefaultTextFont: 14*GetDevicePixelRatio() +'px 微软雅黑',
TitleFont: 13*GetDevicePixelRatio() +'px 微软雅黑', //标题字体
UpTextColor: "rgb(238,21,21)",
DownTextColor: "rgb(25,158,0)",
......@@ -40,17 +43,17 @@ var BLACK_STYLE=
FrameBorderPen: "rgba(236,236,236,0.13)", //边框
FrameSplitPen: "rgba(236,236,236,0.13)", //分割线
FrameSplitTextColor: "rgb(101,104,112)", //刻度文字颜色
FrameSplitTextFont: "12px 微软雅黑", //坐标刻度文字字体
FrameSplitTextFont: 12*GetDevicePixelRatio() +"px 微软雅黑", //坐标刻度文字字体
FrameTitleBGColor: "rgb(0,0,0)", //标题栏背景色
CorssCursorBGColor: "rgb(43,54,69)", //十字光标背景
CorssCursorTextColor: "rgb(255,255,255)",
CorssCursorTextFont: "12px 微软雅黑",
CorssCursorTextFont: 12*GetDevicePixelRatio() +"px 微软雅黑",
CorssCursorPenColor: "rgb(130,130,130)", //十字光标线段颜色
KLine:
{
MaxMin: { Font: '12px 微软雅黑', Color: 'rgb(111,111,111)' }, //K线最大最小值显示
MaxMin: { Font: 12*GetDevicePixelRatio() +'px 微软雅黑', Color: 'rgb(111,111,111)' }, //K线最大最小值显示
Info: //信息地雷
{
Color: 'rgb(205,149,12)',
......
webhqchart.demo/readme.txt
浏览文件 @ 76768f10
......@@ -3,8 +3,8 @@ jscommon目录
(https://github.com/jones2000/HQChart.git/trunk/webhqchart => jscommon)
demo/phone.html 页面行情(K线图)
demo/phone2.html 页面行情(走势图)
demo/phone.html 页面行情(K线图) 支持手机适配
demo/phone2.html 页面行情(走势图) 支持手机适配
demo/phone3.html 页面行情(自定义指数)
demo/phone7.html 通达信脚本网页版(K线图)
......
webhqchart/umychart.js
浏览文件 @ 76768f10
......@@ -35,6 +35,12 @@ function JSChart(divElement)
this.CanvasElement.height=height;
this.CanvasElement.width=parseInt(this.DivElement.style.width.replace("px",""));
this.CanvasElement.style.width=this.CanvasElement.width+'px';
this.CanvasElement.style.height=this.CanvasElement.height+'px';
var pixelTatio = GetDevicePixelRatio(); //获取设备的分辨率
this.CanvasElement.height*=pixelTatio;
this.CanvasElement.width*=pixelTatio;
if (this.JSChartContainer && this.JSChartContainer.Frame)
this.JSChartContainer.Frame.SetSizeChage(true);
......@@ -42,6 +48,29 @@ function JSChart(divElement)
if (this.JSChartContainer) this.JSChartContainer.Draw();
}
//手机屏需要调整 间距
this.AdjustChartBorder=function(chart)
{
var pixelTatio = GetDevicePixelRatio(); //获取设备的分辨率
chart.Frame.ChartBorder.Left*=pixelTatio;
chart.Frame.ChartBorder.Right*=pixelTatio;
chart.Frame.ChartBorder.Top*=pixelTatio;
chart.Frame.ChartBorder.Bottom*=pixelTatio;
}
this.AdjustTitleHeight=function(chart)
{
var pixelTatio = GetDevicePixelRatio(); //获取设备的分辨率
for(let i in chart.Frame.SubFrame)
{
chart.Frame.SubFrame[i].Frame.ChartBorder.TitleHeight*=pixelTatio;
}
chart.ChartCorssCursor.TextHeight*=pixelTatio; //十字光标文本信息高度
}
//历史K线图
this.CreateKLineChartContainer=function(option)
{
......@@ -88,6 +117,8 @@ function JSChart(divElement)
if (!isNaN(option.Border.Bottom)) chart.Frame.ChartBorder.Bottom=option.Border.Bottom;
}
this.AdjustChartBorder(chart);
if (option.IsShowCorssCursorInfo==false) //取消显示十字光标刻度信息
{
chart.ChartCorssCursor.IsShowText=option.IsShowCorssCursorInfo;
......@@ -107,7 +138,7 @@ function JSChart(divElement)
{
if(option.KLineTitle.IsShowName==false) chart.TitlePaint[0].IsShowName=false;
if(option.KLineTitle.IsShowSettingInfo==false) chart.TitlePaint[0].IsShowSettingInfo=false;
if (option.KLineTitle.IsShow == false) chart.TitlePaint[0].IsShow = false;
if(option.KLineTitle.IsShow == false) chart.TitlePaint[0].IsShow = false;
}
//叠加股票
......@@ -151,6 +182,7 @@ function JSChart(divElement)
if (!isNaN(item.TitleHeight)) chart.Frame.SubFrame[i].Frame.ChartBorder.TitleHeight=item.TitleHeight;
}
this.AdjustTitleHeight(chart);
return chart;
}
......@@ -281,6 +313,7 @@ function JSChart(divElement)
if (!isNaN(option.Border.Top)) chart.Frame.ChartBorder.Top=option.Border.Top;
if (!isNaN(option.Border.Bottom)) chart.Frame.ChartBorder.Bottom=option.Border.Bottom;
}
this.AdjustChartBorder(chart);
if (option.Frame)
{
......@@ -320,6 +353,7 @@ function JSChart(divElement)
if (!isNaN(item.TitleHeight)) chart.Frame.SubFrame[2+parseInt(i)].Frame.ChartBorder.TitleHeight=item.TitleHeight;
}
this.AdjustTitleHeight(chart);
return chart;
}
......@@ -707,9 +741,10 @@ JSChart.SetStyle=function(option)
if (option) g_JSChartResource.SetStyle(option);
}
JSChart.FlexibleFontSize=function()
//获取设备分辨率比
JSChart.GetDevicePixelRatio=function()
{
g_JSChartResource.FlexibleFontSize();
return GetDevicePixelRatio();
}
/*//把给外界调用的方法暴露出来
......@@ -1008,6 +1043,7 @@ function JSChartContainer(uielement)
this.GetToucheData=function(e, isForceLandscape)
{
var touches=new Array();
var pixelTatio = GetDevicePixelRatio(); //获取设备的分辨率
for(var i=0; i<e.touches.length; ++i)
{
var item=e.touches[i];
......@@ -1015,7 +1051,7 @@ function JSChartContainer(uielement)
{
touches.push(
{
clientX:item.clientY, clientY:item.clientX,
clientX:item.clientY*pixelTatio, clientY:item.clientX*pixelTatio,
pageX:item.pageY, pageY:item.pageX
});
}
......@@ -1023,7 +1059,7 @@ function JSChartContainer(uielement)
{
touches.push(
{
clientX:item.clientX, clientY:item.clientY,
clientX:item.clientX*pixelTatio, clientY:item.clientY*pixelTatio,
pageX:item.pageX, pageY:item.pageY
});
}
......@@ -1206,6 +1242,7 @@ function JSChartContainer(uielement)
if (item.IsDrawFirst)
item.Draw();
}
for(var i in this.ChartPaint)
{
var item=this.ChartPaint[i];
......@@ -1233,6 +1270,7 @@ function JSChartContainer(uielement)
item.Draw();
}
this.Frame.DrawInsideHorizontal();
this.Frame.DrawLock();
this.Frame.Snapshot();
......@@ -1800,6 +1838,11 @@ function JSChartContainer(uielement)
}
}
function GetDevicePixelRatio()
{
return window.devicePixelRatio || 1;
}
function OnKeyDown(e)
{
if(this.JSChartContainer)
......@@ -2200,6 +2243,46 @@ function AverageWidthFrame()
}
}
//Y刻度画在左边内部
this.DrawInsideHorizontal = function ()
{
if (this.IsHScreen===true) return; //横屏不画
var left = this.ChartBorder.GetLeft();
var right = this.ChartBorder.GetRight();
var bottom = this.ChartBorder.GetBottom();
var top = this.ChartBorder.GetTopEx();
var borderRight = this.ChartBorder.Right;
var borderLeft = this.ChartBorder.Left;
var titleHeight = this.ChartBorder.TitleHeight;
if (borderLeft >= 10) return;
var yPrev = null; //上一个坐标y的值
for (var i = this.HorizontalInfo.length - 1; i >= 0; --i) //从上往下画分割线
{
var item = this.HorizontalInfo[i];
var y = this.GetYFromData(item.Value);
if (y != null && Math.abs(y - yPrev) < 15) continue; //两个坐标在近了 就不画了
//坐标信息 左边 间距小于10 画在内部
if (item.Message[0] != null && borderLeft < 10)
{
if (item.Font != null) this.Canvas.font = item.Font;
this.Canvas.fillStyle = item.TextColor;
this.Canvas.textAlign = "left";
if (y >= bottom - 2)
this.Canvas.textBaseline = 'bottom';
else if (y <= top + 2)
this.Canvas.textBaseline = 'top';
else
this.Canvas.textBaseline = "middle";
this.Canvas.fillText(item.Message[0], left + 1, y);
}
yPrev = y;
}
}
this.GetXFromIndex=function(index)
{
var count=this.XPointCount;
......@@ -3081,6 +3164,16 @@ function HQTradeFrame()
item.Frame.DrawLock();
}
}
this.DrawInsideHorizontal = function ()
{
for (var i in this.SubFrame)
{
var item = this.SubFrame[i];
if (item.Frame.DrawInsideHorizontal) item.Frame.DrawInsideHorizontal();
}
}
this.SetSizeChage=function(sizeChange)
{
this.SizeChange=sizeChange;
......@@ -7064,9 +7157,10 @@ function ChartBuySell()
this.newMethod();
delete this.newMethod;
this.LastDataIcon={Color:'rgb(0,0,205)',Text:'↓'};
this.BuyIcon={Color:'rgb(0,0,205)',Text:'B'};
this.SellIcon={Color:'rgb(0,0,205)',Text:'S'};
this.TextFont=g_JSChartResource.KLineTrain.Font; //"bold 14px arial"; //买卖信息字体
this.LastDataIcon=g_JSChartResource.KLineTrain.LastDataIcon; //{Color:'rgb(0,0,205)',Text:'↓'};
this.BuyIcon=g_JSChartResource.KLineTrain.BuyIcon; //{Color:'rgb(0,0,205)',Text:'B'};
this.SellIcon=g_JSChartResource.KLineTrain.SellIcon; //{Color:'rgb(0,0,205)',Text:'S'};
this.BuySellData=new Map(); //{Date:日期, Op:买/卖 0=buy 1=sell}
this.LastData={}; //当前屏最后一个数据
......@@ -7081,6 +7175,7 @@ function ChartBuySell()
if (isHScreen===true) chartright=this.ChartBorder.GetBottom();
var xPointCount=this.ChartFrame.XPointCount;
this.Canvas.font=this.TextFont;
for(var i=this.Data.DataOffset,j=0;i<this.Data.Data.length && j<xPointCount;++i,++j)
{
var value=this.Data.Data[i];
......@@ -8104,6 +8199,14 @@ function ChartCorssCursor()
this.Canvas.fillStyle=this.TextColor;
this.Canvas.fillText(text,x+1,bottom+2,textWidth);
}
else if (x+textWidth/2>=right)
{
this.Canvas.fillRect(right-textWidth,bottom+2,textWidth,this.TextHeight);
this.Canvas.textAlign="right";
this.Canvas.textBaseline="top";
this.Canvas.fillStyle=this.TextColor;
this.Canvas.fillText(text,right-2,bottom+2,textWidth);
}
else
{
this.Canvas.fillRect(x-textWidth/2,bottom+2,textWidth,this.TextHeight);
......@@ -10033,8 +10136,8 @@ function JSChartResource()
this.Minute.AvPriceColor="rgb(238,127,9)";
this.DefaultTextColor="rgb(43,54,69)";
this.DefaultTextFont='14px 微软雅黑';
this.TitleFont='13px 微软雅黑';
this.DefaultTextFont=14*GetDevicePixelRatio() +'px 微软雅黑';
this.TitleFont=13*GetDevicePixelRatio() +'px 微软雅黑';
this.UpTextColor="rgb(238,21,21)";
this.DownTextColor="rgb(25,158,0)";
......@@ -10044,12 +10147,12 @@ function JSChartResource()
this.FrameBorderPen="rgb(225,236,242)";
this.FrameSplitPen="rgb(225,236,242)"; //分割线
this.FrameSplitTextColor="rgb(117,125,129)"; //刻度文字颜色
this.FrameSplitTextFont="14px 微软雅黑"; //坐标刻度文字字体
this.FrameSplitTextFont=14*GetDevicePixelRatio() +"px 微软雅黑"; //坐标刻度文字字体
this.FrameTitleBGColor="rgb(246,251,253)"; //标题栏背景色
this.CorssCursorBGColor="rgb(43,54,69)"; //十字光标背景
this.CorssCursorTextColor="rgb(255,255,255)";
this.CorssCursorTextFont="14px 微软雅黑";
this.CorssCursorTextFont=14*GetDevicePixelRatio() +"px 微软雅黑";
this.CorssCursorPenColor="rgb(130,130,130)"; //十字光标线段颜色
this.LockBGColor = "rgb(220, 220, 220)";
......@@ -10059,7 +10162,7 @@ function JSChartResource()
this.CacheDomain="https://opensourcecache.zealink.com"; //缓存域名
this.KLine={
MaxMin: {Font:'12px 微软雅黑',Color:'rgb(43,54,69)'}, //K线最大最小值显示
MaxMin: {Font:12*GetDevicePixelRatio() +'px 微软雅黑',Color:'rgb(43,54,69)'}, //K线最大最小值显示
Info: //信息地雷
{
Investor:
......@@ -10140,6 +10243,14 @@ function JSChartResource()
"rgb(105,105,105)",
];
this.KLineTrain =
{
Font:'bold 14px arial',
LastDataIcon: {Color:'rgb(0,0,205)',Text:'⬇'},
BuyIcon: {Color:'rgb(0,205,102 )',Text:'B'},
SellIcon: {Color:'rgb(255,127,36 )',Text:'S'}
};
//自定义风格
this.SetStyle=function(style)
{
......@@ -10158,7 +10269,7 @@ function JSChartResource()
if (style.DefaultTextColor) this.DefaultTextColor = style.DefaultTextColor;
if (style.DefaultTextFont) this.DefaultTextFont = style.DefaultTextFont;
if (style.DynamicTitleFont) this.DynamicTitleFont = style.DynamicTitleFont;
if (style.TitleFont) this.TitleFont = style.TitleFont;
if (style.UpTextColor) this.UpTextColor = style.UpTextColor;
if (style.DownTextColor) this.DownTextColor = style.DownTextColor;
if (style.UnchagneTextColor) this.UnchagneTextColor = style.UnchagneTextColor;
......@@ -10188,12 +10299,6 @@ function JSChartResource()
this.DrawPicture.PointColor = style.DrawPicture.PointColor;
}
}
//手机端动态调整字体大小
this.FlexibleFontSize=function()
{
this.TitleFont='14px 微软雅黑';
}
}
var g_JSChartResource=new JSChartResource();
......
webhqchart/umychart.style.js
浏览文件 @ 76768f10
/*
不同风格行情配置文件
!!手机上字体大小需要*分辨率比
*/
function GetDevicePixelRatio()
{
return window.devicePixelRatio || 1;
}
//黑色风格
var BLACK_STYLE=
......@@ -27,10 +32,8 @@ var BLACK_STYLE=
DefaultTextColor: "rgb(101,104,112)",
DefaultTextFont: '14px 微软雅黑',
DynamicTitleFont: '12px 微软雅黑', //指标动态标题字体
DefaultTextFont: 14*GetDevicePixelRatio() +'px 微软雅黑',
TitleFont: 13*GetDevicePixelRatio() +'px 微软雅黑', //标题字体
UpTextColor: "rgb(238,21,21)",
DownTextColor: "rgb(25,158,0)",
......@@ -40,17 +43,17 @@ var BLACK_STYLE=
FrameBorderPen: "rgba(236,236,236,0.13)", //边框
FrameSplitPen: "rgba(236,236,236,0.13)", //分割线
FrameSplitTextColor: "rgb(101,104,112)", //刻度文字颜色
FrameSplitTextFont: "12px 微软雅黑", //坐标刻度文字字体
FrameSplitTextFont: 12*GetDevicePixelRatio() +"px 微软雅黑", //坐标刻度文字字体
FrameTitleBGColor: "rgb(0,0,0)", //标题栏背景色
CorssCursorBGColor: "rgb(43,54,69)", //十字光标背景
CorssCursorTextColor: "rgb(255,255,255)",
CorssCursorTextFont: "12px 微软雅黑",
CorssCursorTextFont: 12*GetDevicePixelRatio() +"px 微软雅黑",
CorssCursorPenColor: "rgb(130,130,130)", //十字光标线段颜色
KLine:
{
MaxMin: { Font: '12px 微软雅黑', Color: 'rgb(111,111,111)' }, //K线最大最小值显示
MaxMin: { Font: 12*GetDevicePixelRatio() +'px 微软雅黑', Color: 'rgb(111,111,111)' }, //K线最大最小值显示
Info: //信息地雷
{
Color: 'rgb(205,149,12)',
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或