HQChart使用教程30-K线图如何对接第3方数据10-如何绘制自定义线段或多边行指标数据
使用多线段数据结构可以快速绘制出线段或多边形
效果图
前面的步骤和第3方指标替换一样， 通过网络协议回调，知道需要执行的指标， 替换自己的数据。这里就不说了， 不知道的看以下2个教程
HQChart使用教程30-K线图如何对接第3方数据1
HQChart使用教程30-K线图如何对接第3方数据5-指标数据
json格式
自定义线段是做为一组输出变量， 填入到输出变量数组(outvar)中
name
填’MULTI_LINE’ 固定
type
填 1 固定
Draw
线段绘制数据
Draw.DrawType
固定 ‘MULTI_LINE’
Draw.LineDash
虚线配置 (可选)
如:
var line2=
{
name:'MULTI_LINE', type:1,
Draw: { DrawType:'MULTI_LINE', DrawData:[],
LineDash:[5,5], //虚线配置
} //绘制线段数组
};
Draw.LineWidth
线段宽度（可选） 缺省为1
10323以上的版本才支持
var line2=
{
name:'MULTI_LINE', type:1,
Draw: { DrawType:'MULTI_LINE', DrawData:[], LineWidth:3,
LineDash:[5,5], //虚线配置
} //绘制线段数组
};
Draw.Arrow
箭头配置 （可选）
var line3=
{
name:'MULTI_LINE', type:1,
Draw:
{
DrawType:'MULTI_LINE', DrawData:[],
Arrow:
{
Start:true, //是否绘制开始箭头 <-
End:true, //是否绘制结束箭头 ->
Angle:30, //三角斜边一直线夹角
Length:10, //三角斜边长度
LineWidth:4, //箭头粗细
}
} //绘制线段数组
};
效果图
Draw.DrawData
绘制的自定义线段数组， 支持多组线段
格式
{
Color：线段颜色，
BGColor: 线段围成的区域填充颜色 缺省不填充 如:"rgba(0,44,55,0.5)" ,
Point：[绘制线段的点数组]
Circle:[绘制圆点]
}
单个Point数据结构:
{ Date:日期, Time: 时间（分时用,日线不需要), Value:Y轴值 }
圆点数据结构
//{ Color：颜色， Radius：半径，Type：0=填充圆 1=只绘制圆边框， LineWidth：绘制圆边框线宽度 }
Circle:
[
{ Color:"rgb(255, 0, 255)", Radius:5, LineWidth:3, Type:1 },
{ Color:"rgb(255,255,255)", Radius:5 }
] //绘制圆
圆点效果图：
下面是绘制一个三角行
{
Color:'rgb(244,55,50)',
Point:[{ Date:20190916, Value:15.5},{Date:20190917, Value:15.5}, {Date:20190918, Value:15.5} , {Date:20190917, Value:15.05},{ Date:20190916, Value:15.5} ]
};
#完整实例
https://jones2000.github.io/HQChart/webhqchart.demo/samples/kline_MULTI_LINE_index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>K线图-多线段示例</title>
<!-- 加载资源 -->
<link rel="stylesheet" href="../jscommon/umychart.resource/css/tools.css" />
<link rel="stylesheet" href="../jscommon/umychart.resource/font/iconfont.css" />
</head>
<body>
<div id="kline" >
</div>
<script src="../jscommon/umychart.resource/js/jquery.min.js"></script>
<script src="../jscommon/umychart.resource/js/webfont.js"></script>
<script src='../jscommon/umychart.console.js'></script> <!-- 日志输出 -->
<script src="../jscommon/umychart.network.js"></script> <!-- 网络请求分装 -->
<script src="../jscommon/umychart.js"></script> <!-- K线图形 -->
<script src="../jscommon/umychart.complier.js"></script> <!-- 麦语言解析执行器 -->
<script src="../jscommon/umychart.index.data.js"></script> <!-- 基础指标库 -->
<script src="../jscommon/umychart.style.js"></script> <!-- 白色风格和黑色风格配置信息 -->
<script src="../jscommon/umychart.NetworkFilterTest.js"></script>
<script>
MARKET_SUFFIX_NAME.GetMarketStatus = function (symbol) { return 2; }
//简单的把K线控件封装下
function KLineChart(divKLine)
{
this.DivKLine=divKLine;
this.Chart=JSChart.Init(divKLine, false, true); //把K线图绑定到一个Div上
//K线配置信息
this.Option= {
Type:'历史K线图', //创建图形类型
//Type:'历史K线图横屏',
//EnableBorderDrag:false,
Windows: //窗口指标
[
{
Index:'多线段指标',
API:
{
Name:'多线段指标',
Script:null,
Args:null,
Url:'http://127.0.0.1:18080/api/jsindex'
}
},
{Index:"MACD"},
{Index:"VOL"},
],
OverlayIndex:
[
], //叠加指标
//OverlayIndexFrameWidth:1,
//DragDownload: { Day:{ Enable:true } , Minute:{ Enable:true }},
EnableYDrag:
{
Right:true,
Left:true,
},
//Language:'EN',
Symbol:"600000.sh",
IsAutoUpdate:true, //是自动更新数据
AutoUpdateFrequency:3000, //数据更新频率
//TradeIndex: {Index:'交易系统-BIAS'}, //交易系统
SplashTitle:'加载数据中......',
IsShowRightMenu:true, //右键菜单
//CorssCursorTouchEnd:true,
//IsClickShowCorssCursor:true,
//IsCorssOnlyDrawKLine:true,
CtrlMoveStep:10,
//EnableVerifyRecvData:true,
CorssCursorInfo: { Right:2, DateFormatType:3, HPenType:1, VPenType:1, IsShowClose:false, VLineType:0,RightButton:{ Enable:true }, IsShowCorss:true, PriceFormatType:0, DataFormatType:0 },
EnableZoomIndexWindow:true,
DrawTool: //画图工具
{
//StorageKey:'4E7EA133-D6C8-4776-9869-1DDDCC5FA744'
},
KLine: //K线设置
{
DragMode:1, //拖拽模式 0=禁止拖拽 1=数据拖拽 2=区间选择
Right:1, //复权 0 不复权 1 前复权 2 后复权
Period:0, //周期 0 日线 1 周线 2 月线 3 年线
MaxRequestDataCount:3000, //数据个数
MaxRequestMinuteDayCount:5, //分钟数据获取几天数据 默认取5天数据
//Info:["互动易","大宗交易",'龙虎榜',"调研","业绩预告","公告"], //信息地雷
//Info:["公告"],
IsShowTooltip:true, //是否显示K线提示信息
DrawType:0, //K线类型 0=实心K线柱子 1=收盘价线 2=美国线 3=空心K线柱子 4=收盘价面积图
//FirstShowDate:20161201,
KLineDoubleClick:false, //禁止双击弹框
RightSpaceCount:2,
ZoomType:0,
//PageSize:30, //一屏显示多少数据
DataWidth:10,
},
StepPixel:0,
IsDrawPictureXY:true,
Listener:
{
//KeyDown:false,
//Wheel:false
},
SelectedChart:{ EnableSelected: true, EnableMoveOn:true },
EnableIndexChartDrag:true,
KLineTitle: //标题设置
{
IsShowName:true, //不显示股票名称
IsShowSettingInfo:true, //不显示周期/复权
IsTitleShowLatestData:true,
},
EnableYDrag:
{
Right:true,
Left:true,
},
Border: //边框
{
Left:50, //左边间距
Right:90, //右边间距
Bottom:25, //底部间距
Top:25, //顶部间距
AutoLeft:{ Blank:10, MinWidth:60 },
AutoRight:{ Blank:5, MinWidth:60 },
},
Frame: //子框架设置
[
{
SplitCount:6,
Custom:
[
{
Type:0,
Position:'right',LineType:1,
//PositionEx:1,
},
{
Type:1,
Position:'right',IsShowLine:true, LineType:0,
//PositionEx:1,
Data:
[
{
Value:7.73,
Color:'rgb(0, 0 ,205)', TextColor:'rgb(255,255,255)', //Color:线段及文字背景色 TextColor:文字颜色
Text:[ {Text:"价格:9.73"}, {Text:"成本线"} ]
},
{
Value:6.50,
Color:'rgb(255 ,165, 79)', TextColor:'rgb(255,255,255)', //Color:线段及文字背景色 TextColor:文字颜色
}
]
},
{
Type:1,
Position:'right',IsShowLine:true,LineType:1,PositionEx:1, LineWidth:2, LineDash:[4,4],
Data:
[
{
Value:8.0,
Color:'rgb(255,185,255)', TextColor:'rgb(255,255,255)', //Color:线段及文字背景色 TextColor:文字颜色
},
{
Value:5.51,
Color:'rgb(255,185,0)', TextColor:'rgb(255,255,255)', //Color:线段及文字背景色 TextColor:文字颜色
}
]
}
]
},
{ SplitCount:5 },
{ SplitCount:4 }
],
ExtendChart: //扩展图形
[
//{Name:'KLineTooltip' }, //手机端tooltip
//{Name:"FrameSplitPaint", LineColor:"rgb(200,0,0)" }
],
Overlay:
[
//{Symbol:'399300.sz', DrawType:1, Color:'rgb(0,0,255)'},
//{ Symbol:'600999.sh' }
],
};
this.Create=function() //创建图形
{
var self=this;
//$(window).resize(function() { self.OnSize( {Type:1} ); }); //绑定窗口大小变化事件
$(window).resize(function() { self.OnSize( ); }); //绑定窗口大小变化事件
//var blackStyle=HQChartStyle.GetStyleConfig(STYLE_TYPE_ID.BLACK_ID); //读取黑色风格配置
//JSChart.SetStyle(blackStyle);
//this.DivKLine.style.backgroundColor=blackStyle.BGColor; //设置最外面的div背景
JSChart.GetResource().ToolbarButtonStyle=1;
this.OnSize(); //让K线全屏
this.Option.NetworkFilter=(data, callback)=>{ this.NetworkFilter(data, callback); }
this.Chart.SetOption(this.Option); //设置K线配置
}
this.NetworkFilter=function(data, callback)
{
switch(data.Name)
{
case 'APIScriptIndex::ExecuteScript':
var request=data.Request;
if (request.Data.indexname=='多线段指标') this.RequestMulitLineIndex(data, callback);
break;
default:
HQData.NetworkFilter(data, callback);
}
}
this.OnSize=function(option) //自适应大小调整
{
var height= $(window).height()-50;
var width = $(window).width();
//width=50000;
this.DivKLine.style.top='0px';
this.DivKLine.style.left='0px';
this.DivKLine.style.width=width+'px';
this.DivKLine.style.height=height+'px';
this.Chart.OnSize(option);
}
this.RequestMulitLineIndex=function(data, callback)
{
var hqchart=data.HQChart;
var kData=hqchart.ChartPaint[0].Data;
var aryClose=kData.GetClose();
var aryDate=kData.GetDate();
var closeLine={name:'收盘价线', type:0, data:aryClose };
var line2=
{
name:'MULTI_LINE', type:1,
Draw: { DrawType:'MULTI_LINE', DrawData:[] } //绘制线段数组
};
//连线
var point=
{
Color:'rgb(255, 0 ,255)',
Point:[]
};
var start=aryClose.length-100;
for(var i=start;i<aryClose.length;++i)
{
var price=aryClose[i];
var value=Math.ceil(Math.random()*10)/1000*price+price; //随机测试数据
point.Point.push({ Date:aryDate[i], Value:value });
}
//三角形
var point2=
{
Color:'rgb(255, 127, 36)',
Point:[]
};
var start=aryClose.length-80;
var firstPoint, firstDate;
for(var i=start, j=0;i<aryClose.length;++i, ++j)
{
var price=aryClose[i];
if (j==0)
{
firstPoint=price;
firstDate=aryDate[i];
point2.Point.push({ Date:aryDate[i], Value:firstPoint });
}
else if (j==5)
{
point2.Point.push({ Date:aryDate[i], Value:price*(1+0.04) });
}
else if (j==10)
{
point2.Point.push({ Date:aryDate[i], Value:firstPoint });
point2.Point.push({ Date:firstDate, Value:firstPoint });
}
}
line2.Draw.DrawData.push(point);
line2.Draw.DrawData.push(point2);
var apiData=
{
code:0,
stock:{ name:hqchart.Name, symbol:hqchart.Symbol },
outdata: { date:kData.GetDate() , outvar:[line2] }
};
data.PreventDefault=true;
console.log('[KLineChart::RequestMulitLineIndex] apiData ', apiData);
callback(apiData);
}
}
$(function ()
{
var klineControl=new KLineChart(document.getElementById('kline'));
klineControl.Create();
})
</script>
</body>
</html>
<style>
#kline
{
width: 900px;
height:400px;
position: relative;
/*margin-top: 100px;*/
}
.btn-style
{
padding: 3px 8px;
border: 1px solid #ececec;
border-radius: 5px;
background-color: #f5f5f5;
cursor: pointer;
}
</style>
HQChart代码地址
地址：github.com/jones2000/HQChart
个人爱好(模型/摄影)
668
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
