HQChart使用教程30-K線圖如何對接第3方數據18-如何繪製自定義柱子
使用自定義柱子數據結構可以快速繪製出柱子
效果圖
前面的步驟和第3方指標替換一樣, 通過網絡協議回調,知道需要執行的指標, 替換自己的數據。這裏就不說了, 不知道的看以下2個教程
HQChart使用教程30-K線圖如何對接第3方數據1
HQChart使用教程30-K線圖如何對接第3方數據5-指標數據
自定義柱子集合是做爲一組輸出變量, 填入到輸出變量數組(outvar)中
數據格式
name
填’MULTI_BAR’ 固定
type
填 1 固定
Draw
柱子繪製數據
Draw.DrawType
固定 ‘MULTI_BAR’
Draw.DrawData
繪製的自定義柱子集合, 支持多組柱子集合
格式
{
Color:柱子顏色,
Width: 柱子寬度 , 缺省使用K線柱子寬度
Type: 0 實心 1空心 缺省使用實心
Point:[繪製柱子的點數組] }
單個Point數據結構:
{ Date:日期, Time: 時間(分時用,日線不需要), Value:Y軸值(柱子頂部/底部), Value2: Y軸值2(柱子底部/頂部) }
下面是繪製一組柱子實例
var point=
{
Color:'rgb(244,55,50)', //柱子顏色
//Type:1,
Point:
[
{Date:20190916, Value:15.5, Value2:0 }, //在20190916上畫一個底部是0 頂部是15.5的柱子
{Date:20190917, Value:15.5, Value2:20 }, //在20190917上畫一個底部是15.5 頂部是20的柱子
{Date:20190902, Value:10.5,Value2:0},
]
};
完整實例
<!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 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線圖-第3方數據-多柱子指標</title>
<link rel="stylesheet" href="../jscommon/umychart.resource/css/tools.css" />
<link rel="stylesheet" href="../jscommon/umychart.resource/font/iconfont.css" />
<!-- 使用阿里雲圖片 -->
<!--<link rel="stylesheet" href="https://at.alicdn.com/t/font_1040563_1d1tgaoqofpi.css" />-->
<!--<link rel="stylesheet" href="https://at.alicdn.com/t/font_1196214_ny3l0dbclr.css" />-->
</head>
<body>
<div id="kline" style="width: 900px;height:400px;position: relative;"></div>
<script src="content/js/jquery.min.js"></script>
<script src="content/js/webfont.js"></script>
<script src="../jscommon/umychart.network.js"></script>
<script src="../jscommon/umychart.js"></script>
<script src="../jscommon/umychart.complier.js"></script>
<script src="../jscommon/umychart.index.data.js"></script>
<script src="../jscommon/umychart.style.js"></script>
<!-- 引入vConsole的JS庫 -->
<script src="../vConsole-3.2.0/dist/vconsole.min.js"></script>
<script>
//預加載下阿里雲圖片
WebFont.load({ custom: { families: ['iconfont'] } });
function getURLParams(name)
{
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return decodeURI(r[2]);
return null;
}
$(window).resize(resizeCanvas);
function resizeCanvas()
{
var height= $(window).height();
var width = $(window).width();
var divKline=document.getElementById('kline');
divKline.style.top=0+'px';
divKline.style.left=0+'px';
divKline.style.width=(width)+'px';
divKline.style.height=(height)+'px';
divKline.JSChart.OnSize();
}
function NetworkFilter(data, callback)
{
console.log('[NetworkFilter] data', data);
if (data.Name=='APIScriptIndex::ExecuteScript')
{
var request=data.Request;
if (request.Data.indexname=='多柱子指標')
{
var hqchart=data.HQChart;
// var kData=hqchart.ChartPaint[0].Data;
//var closeLine={name:'收盤價線', type:0, data:kData.GetClose() };
var bar=
{
name:'MULTI_BAR', type:1,
Draw: { DrawType:'MULTI_BAR', DrawData:[] } //繪製柱子數組
};
//第一組柱子
var point=
{
Color:'rgb(244,55,50)', //顏色
//Type:1,
Point:
[
{Date:20190916, Value:15.5, Value2:0 },
{Date:20190917, Value:15.5, Value2:10 },
{Date:20190902, Value:10.5,Value2:0},
//{Date:20190917, Value:15.05},
//{Date:20190916, Value:15.5}
]
};
//第2組柱子
var point2=
{
Color:'rgb(0,55,50)', //顏色
Point:
[
{ Date:20190902, Value:15.5,Value2:0},
{ Date:20190903, Value:15.33,Value2:0},
{ Date:20190904, Value:15.21,Value2:20} ,
{ Date:20190906, Value:15.05,Value2:0},
{ Date:20190909, Value:15.5,Value2:0}
]
};
bar.Draw.DrawData.push(point2);
bar.Draw.DrawData.push(point);
var apiData=
{
code:0,
stock:{ name:hqchart.Name, symbol:hqchart.Symbol },
//outdata: { date:kData.GetDate() , outvar:[closeLine,line2] }
outdata: { outvar:[bar] }
};
data.PreventDefault=true;
console.log('[NetworkFilter::NetworkFilter] apiData ', apiData);
callback(apiData);
}
}
}
$(function ()
{
var debug=getURLParams('debug');
if (debug==1)
{
var vConsole = new VConsole();
console.log('create VConsole');
}
var symbol=getURLParams('symbol');
if (symbol==null) symbol='000001.sz';
// 創建股票K線圖
var chart=JSChart.Init(document.getElementById('kline'));
var height= $(window).height();
var width = $(window).width();
var divKline=document.getElementById('kline');
divKline.style.width=width+'px';
divKline.style.height=height+'px';
chart.OnSize();
var option=
{
Type:'歷史K線圖',
//Type:'歷史K線圖橫屏',
Windows:
[
{
Index:'MA',
},
{
Index:"多柱子指標",
API:
{
Name:'多柱子指標',
Script:null,
Args:null,
Url:'http://127.0.0.1:18080/api/jsindex'
}
},
], //窗口指標
Symbol:symbol,
IsAutoUpdate:true, //是自動更新數據
AutoUpdateFrequency:3000, //數據更新頻率
//TradeIndex: {Index:'交易系統-BIAS'}, //交易系統
NetworkFilter:NetworkFilter,
IsShowRightMenu:true, //右鍵菜單
IsShowCorssCursorInfo:true, //是否顯示十字光標的刻度信息
CorssCursorInfo:{ Left:1, Right:1, Bottom:1, IsShowCorss:true, PressTime:300 }, //十字光標刻度設置
KLine:
{
DragMode:1, //拖拽模式 0 禁止拖拽 1 數據拖拽 2 區間選擇
Right:1, //復權 0 不復權 1 前復權 2 後復權
Period:0, //週期 0 日線 1 周線 2 月線 3 年線
MaxReqeustDataCount:1000, //數據個數
MaxRequestMinuteDayCount:6,
PageSize:90, //一屏顯示多少數據
IndexTreeApiUrl:"https://opensourcecache.zealink.com/cache/hqh5/index/commonindextree.json", //指標樹下載地址
//Info:["互動易","大宗交易",'龍虎榜',"調研","業績預告","公告"], //信息地雷
//Info:["公告","互動易","調研"], //信息地雷
InfoPosition:1, //顯示位置
KLineDoubleClick:false, //雙擊分鐘走勢圖
IsShowTooltip:true, //是否顯示K線提示信息
//FirstShowDate:20180401, //首屏顯示的起始日期
DrawType:0,
},
KLineTitle: //標題設置
{
IsShowName:true, //不顯示股票名稱
IsShowSettingInfo:true //不顯示週期/復權
},
Border: //邊框
{
Left:5, //左邊間距
Right:60, //右邊間距
Bottom:25,
Top:25
},
Language:"CN", //英文 'EN' 中文:'CN'
ExtendChart: //擴展圖形
[
{Name:'畫圖工具',Top:25}
],
Frame: //子框架設置 (Height 窗口高度比例值)
[
{ SplitCount:5,
//Height:4,
IsShowLeftText:false,
IsShowRightText:true
},
{
SplitCount:3,
//Height:2,
IsShowLeftText:false,
IsShowRightText:true
},
{
SplitCount:2,
//Height:2,
IsShowLeftText:false,
IsShowRightText:true
}
],
Overlay:
[
//{Symbol:'000001.sh', DrawType:0},
//{Symbol:'002415.sz', DrawType:0}
],
}
var windowHeight= $(window).height();
var windowWidth = $(window).width();
if (windowWidth<=420) //手機小屏左右不顯示座標
{
option.Border.Left=1;
option.Border.Right=1;
option.KLine.IsShowTooltip=false; //關閉pc端tooltip
option.KLine.Info=null;
option.KLine.PageSize=30;
option.ExtendChart=[{Name:'KLineTooltip' }]; //開啓手機端tooltip
//option.ExtendChart=null;
option.IsCorssOnlyDrawKLine=true;
option.CorssCursorTouchEnd=true;
for(var i in option.Windows)
{
option.Windows[i].Modify=false;
option.Windows[i].Change=false;
}
}
chart.SetOption(option);
resizeCanvas();
})
</script>
</body>
</html>
如果還有問題可以加交流QQ羣: 950092318
HQChart代碼地址
地址:github.com/jones2000/HQChart