cs/index.html
<html xmlns="http://www.w3.org/1999/xhtml">
<link href="https://fonts.googleapis.com/css?family=Cousine|Roboto+Mono" rel="stylesheet">
<style>
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
*{
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
html, body, .container {
height: 100%;
width: 100%;
background-color: #3b3b42;
color: #f5f5f5;
}
.chart-container {
height: calc(100% - 100px);
position: relative;
}
.chart-canvas {
display: block;
width: 100%;
height: 100%;
}
#cursorChart {
position: absolute;
top: 0;
left: 0;
}
</style>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ClChart Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div id='message'>Welcome to ClChart</div>
<div class="form-group">
<input type="text" style="width:50%" name="send-string" id="send-string" value="sisdb.get sh600600.info" />
<button onclick="send_string()">send string</button>
</div>
<div class="form-group">
<input type="text" name="send-string" id="code-string" value="sh600600" />
<button onclick="drawChart('test')">test</button>
<button onclick="drawChart('day')">day</button>
<button onclick="drawChart('min5')">min5</button>
<button onclick="drawChart('mday')">mday</button>
<button onclick="drawChart('min')">now</button>
<button onclick="drawChart('level2')">level2</button>
</div>
<div class="chart-container">
<canvas class="chart-canvas" id="mainChart" width="400" height="500"></canvas>
<canvas class="chart-canvas" id="cursorChart" width="400" height="500"></canvas>
</div>
<div id='recv-string'></div>
</body>
</html>
<script>
////////////////////////////////////////////
//速度测试
///////////////////////////////////////////
let _beginTime, _wsTime, _endTime;
let _logMess = document.getElementById("message");
function speed_start() {
_beginTime = new Date().getTime();
_endTime = _beginTime;
console.log('start time:', _beginTime);
}
function speed_restart() {
_wsTime = new Date().getTime();
console.log('cost time:', _wsTime - _endTime);
_endTime = _wsTime;
}
function speed_stop() {
let tt = new Date().getTime();
console.log('total time:', tt - _beginTime, 'last cost time:', tt - _endTime);
_logMess.innerHTML = 'total time:' + (tt - _beginTime) + 'last cost time:' + (tt - _endTime);
}
</script>
<script src="../dist/ClChart.js"></script>
<script src="./drive.js"></script>
<script>
//
var code = document.getElementById("code-string");
code.values = client_config_get("code");
function send_string() {
var str = document.getElementById("send-string");
send_client_command([{
key: 'info',
cmd: str.values.split(' ')
},
// {key:'exch',cmd:"sisdb.get sh600600.day"}
],
function show(data) {
var str = document.getElementById("recv-string");
console.log('--- out --- ', typeof data, data);
let sss = '';
for (const item in data) {
sss = sss + item + ' : ' + data[item]
console.log('--- s --- ', sss);
}
str.innerHTML = sss;
});
}
function drawChart(style) {
var code = document.getElementById("code-string");
client_config_set("code", code.values);
switch (style) {
case 'day':
initLayout(style); // 初始化布局，每种类型只用一次
drawKline(code.values, style);
break;
case 'min5':
initLayout('min5'); // 初始化布局，每种类型只用一次
drawMinline(code.values, style);
break;
case 'min':
initLayout(style); // 初始化布局，每种类型只用一次
drawMinute(code.values);
break;
case 'mday':
initLayout(style); // 初始化布局，每种类型只用一次
drawMday(code.values);
break;
case 'level2':
drawLevel2(code.values);
break;
default:
break;
}
}
/////////////////////////////////////////////////////////
// 初始化工作，只所以不动态生成canvas是为了兼容不同平台
//////////////////////////////////////////////////////////
// 开始画图
const mainCanvas = document.getElementById('mainChart');
const cursorCanvas = document.getElementById('cursorChart');
const syscfg = {
scale: window.devicePixelRatio,
axisPlatform: 'web',
mainCanvas: {
canvas: mainCanvas,
context: mainCanvas.getContext('2d')
},
cursorCanvas: {
canvas: cursorCanvas,
context: cursorCanvas.getContext('2d')
}
}
console.log(syscfg);
client.Chart = ClChart.createSingleChart(syscfg);
client.curChart = 'none';
function initLayout(style) {
if (client.curChart === style) return; // 布局不变就不重置了
console.log(client.Chart);
client.Chart.clearLayout();
// client.Chart.clear();
if (style === 'min') {
// 设置画布尺寸
let mainHeight = mainCanvas.height * 2 / 3
let mainWidth = Math.max(mainCanvas.width * 0.65, mainCanvas.width - 400)
// 设置画布区域布局
const mainLayoutCfg = {
layout: ClChart.DEF_CHART.CHART_LAYOUT,
config: ClChart.DEF_CHART.CHART_NOW,
rectMain: {
left: 0,
top: 0,
width: mainWidth,
height: mainHeight
}
}
client.Chart.createChart('user.minline', 'system.chart', mainLayoutCfg, function (result) {
// console.log(result)
})
const volumeLayoutCfg = {
layout: ClChart.DEF_CHART.CHART_LAYOUT,
config: ClChart.DEF_CHART.CHART_NOWVOL,
rectMain: {
left: 0,
top: mainHeight,
width: mainWidth,
height: mainCanvas.height - mainHeight
}
}
client.Chart.createChart('user.minvol', 'system.chart', volumeLayoutCfg, function (result) {
// console.log(result)
})
const orderLayoutCfg = {
layout: ClChart.DEF_CHART.CHART_LAYOUT,
config: ClChart.DEF_CHART.CHART_ORDER,
rectMain: {
left: mainWidth,
top: 0,
width: mainCanvas.width - mainWidth,
height: mainCanvas.height
}
}
client.Chart.createChart('user.order', 'system.board', orderLayoutCfg, function (result) {
// console.log(result)
})
}
if (style === 'mday') {
let mainHeight = mainCanvas.height * 2 / 3
// 设置画布区域布局
const mainLayoutCfg = {
layout: ClChart.DEF_CHART.CHART_LAYOUT,
config: ClChart.DEF_CHART.CHART_MDAY,
rectMain: {
left: 0,
top: 0,
width: mainCanvas.width,
height: mainHeight
}
}
client.Chart.createChart('user.mday.line', 'system.chart', mainLayoutCfg, function (result) {
// console.log(result)
})
const volumeLayoutCfg = {
layout: ClChart.DEF_CHART.CHART_LAYOUT,
config: ClChart.DEF_CHART.CHART_MDAYVOL,
rectMain: {
left: 0,
top: mainHeight,
width: mainCanvas.width,
height: mainCanvas.height - mainHeight
}
}
client.Chart.createChart('user.mday.vol', 'system.chart', volumeLayoutCfg, function (result) {
// console.log(result)
})
}
if (style === 'day' || style === 'min5') {
let mainHeight = mainCanvas.height * 2 / 3
// 设置画布区域布局
const mainLayoutCfg = {
layout: {
offset: {
left: 5,
right: 10
}
},
buttons: ClChart.DEF_CHART.CHART_BUTTONS,
config: ClChart.DEF_CHART.CHART_KBAR,
rectMain: {
left: 0,
top: 0,
width: mainCanvas.width,
height: mainHeight
}
}
client.Chart.createChart('user.kbar', 'system.chart', mainLayoutCfg, function (result) {
// console.log(result)
})
const volumeLayoutCfg = {
layout: {
offset: {
left: 5,
right: 10
}
},
config: ClChart.DEF_CHART.CHART_VBAR,
rectMain: {
left: 0,
top: mainHeight,
width: mainCanvas.width,
height: mainCanvas.height - mainHeight
}
}
client.Chart.createChart('user.vbar', 'system.chart', volumeLayoutCfg, function (result) {
// console.log(result)
})
}
client.curChart = style;
client.tradeDate = 20190419;
}
// 画分钟线
function drawMinute(code) {
// console.log('Draw ====> Min Line')
// 清除画布，及数据
client.Chart.clear();
// 初始化数据
client.Chart.initData(client.tradeDate, ClChart.DEF_DATA.STOCK_TRADETIME)
send_client_command([{
key: 'info',
cmd: ['sisdb.get' , code + '.info']
},
{
key: 'min',
cmd: ['sisdb.get' , code + '.min']
},
{
key: 'tick',
cmd: ['sisdb.get', code + '.tick','{"search":{"start":-50,"stop":-1}}']
},
{
key: 'now',
cmd: ['sisdb.get' , code + '.now']
}
],
function draw(data) {
console.log(data);
client.Chart.setData('INFO', ClChart.DEF_DATA.FIELD_INFO, data['info'].values)
client.Chart.setData('MIN', ClChart.DEF_DATA.FIELD_MIN, data['min'].values)
client.Chart.setData('TICK', ClChart.DEF_DATA.FIELD_TICK, data['tick'].values)
client.Chart.setData('NOW', ClChart.DEF_DATA.FIELD_NOW, data['now'].values)
// 只有pubData才会增补其他信息，并计算所有的线
client.Chart.bindData(client.Chart.getChart('user.minline'), 'MIN')
client.Chart.bindData(client.Chart.getChart('user.minvol'), 'MIN')
client.Chart.onPaint()
});
}
// 画五日线
function drawMday(code) {
console.log('Five Day Line')
// 清除画布，及数据
client.Chart.clear();
// 初始化数据
client.Chart.initData(client.tradeDate, ClChart.DEF_DATA.STOCK_TRADETIME)
send_client_command([{
key: 'info',
cmd: ['sisdb.get' , code + '.info']
},
{
key: 'now',
cmd: ['sisdb.get' , code + '.now']
},
{
key: 'mday',
cmd: ['sisdb.get', code + '.mday', '{"search":{"start":-1200,"stop":-1}}']
}
],
function draw(data) {
console.log(data);
client.Chart.setData('INFO', ClChart.DEF_DATA.FIELD_INFO, data['info'].values)
client.Chart.setData('NOW', ClChart.DEF_DATA.FIELD_NOW, data['now'].values)
client.Chart.setData('MDAY', ClChart.DEF_DATA.FIELD_MIN, data['mday'].values)
client.Chart.bindData(client.Chart.getChart('user.mday.line'), 'MDAY')
client.Chart.bindData(client.Chart.getChart('user.mday.vol'), 'MDAY')
client.Chart.onPaint()
});
}
// 画日线
function drawKline(code, peroid) {
// 清除画布，及数据
client.Chart.clear();
// 初始化数据
client.Chart.initData(client.tradeDate, ClChart.DEF_DATA.STOCK_TRADETIME)
send_client_command([{
key: 'info',
cmd: ['sisdb.get' , code + '.info']
},
{
key: 'day',
cmd: ['sisdb.get', code + '.day', '{"search":{"start":-500,"stop":-1}}']
// cmd: ['sisdb.get', code + '.day']
}
],
function draw(data) {
console.log(data);
client.Chart.setData('INFO', ClChart.DEF_DATA.FIELD_INFO, data['info'].values)
client.Chart.setData('DAY', ClChart.DEF_DATA.FIELD_DAY, data['day'].values)
client.Chart.bindData(client.Chart.getChart('user.kbar'), 'DAY')
client.Chart.bindData(client.Chart.getChart('user.vbar'), 'DAY')
client.Chart.onPaint()
});
}
function drawMinline(code, peroid) {
// 清除画布，及数据
client.Chart.clear();
// 初始化数据
client.Chart.initData(client.tradeDate, ClChart.DEF_DATA.STOCK_TRADETIME)
send_client_command([{
key: 'info',
cmd: ['sisdb.get' , code + '.info']
},
{
key: 'min5',
cmd: ['sisdb.get', code + '.min5', '{"search":{"start":-500,"stop":-1}}']
}
],
function draw(data) {
console.log(data);
client.Chart.setData('INFO', ClChart.DEF_DATA.FIELD_INFO, data['info'].values)
client.Chart.setData('M5', ClChart.DEF_DATA.FIELD_DAY, data['min5'].values)
client.Chart.bindData(client.Chart.getChart('user.kbar'), 'M5')
client.Chart.bindData(client.Chart.getChart('user.vbar'), 'M5')
client.Chart.onPaint()
});
}
// // 画分钟线
// function drawLevel2(code) {
// console.log('Draw ====> Level2 Line')
// if (client.curChart !== 'level2')
// {
// let mainHeight = mainCanvas.height * 2 / 3
// let mainWidth = Math.max(mainCanvas.width * 0.65, mainCanvas.width - 400)
// // 设置画布区域布局
// client.Chart.createChart('user.order', 'coollyer.super', {
// rectMain: {
// left: 0,
// top: 0,
// width: mainWidth,
// height: mainHeight
// }
// },
// function (result) {
// // console.log(result)
// })
// client.Chart.createChart('user.queue', 'coollyer.super', {
// rectMain: {
// left: 0,
// top: mainHeight,
// width: mainWidth,
// height: mainCanvas.height - mainHeight
// }
// },
// function (result) {
// // console.log(result)
// })
// // client.Chart.createChart('user.snapshot', 'coollyer.super', {
// client.Chart.createChart('user.snapshot', 'system.board', {
// layout: ClChart.DEF_CHART.CHART_LAYOUT,
// config: ClChart.DEF_CHART.CHART_ORDER,
// rectMain: {
// left: mainWidth,
// top: 0,
// width: mainCanvas.width - mainWidth,
// height: mainCanvas.height
// }
// },
// function (result) {
// // console.log(result)
// })
// client.curChart = 'level2';
// }
// // 清除画布，及数据
// client.Chart.clear();
// // 初始化数据
// client.Chart.initData(client.tradeDate, ClChart.DEF_DATA.STOCK_TRADETIME)
// send_client_command([{
// key: 'info',
// cmd: ['sisdb.get' , code + '.info']
// },
// {
// key: 'order',
// cmd: ['sisdb.get', code + '.order', '{"search":{"start":-50,"stop":-1}}']
// },
// {
// key: 'queue',
// cmd: ['sisdb.get', code + '.queue', '{"search":{"start":-50,"stop":-1}}']
// },
// {
// key: 'snapshot',
// cmd: ['sisdb.get', code + '.snapshot' ,'{"search":{"start":-50,"stop":-1}}']
// }
// ],
// function draw(data) {
// console.log(data);
// client.Chart.setData('INFO', ClChart.DEF_DATA.FIELD_INFO, data['info'].values)
// client.Chart.setData('order', data['order'].fields, data['order'].values)
// client.Chart.setData('queue', data['queue'].fields, data['queue'].values)
// client.Chart.setData('snapshot', data['snapshot'].fields, data['snapshot'].values)
// client.Chart.setData('NOW', data['snapshot'].fields, data['snapshot'].values)
// client.Chart.setData('TICK', data['order'].fields, data['order'].values)
// // client.Chart.bindData(client.Chart.getChart('user.minline'), 'MIN')
// // client.Chart.bindData(client.Chart.getChart('user.snapshot'), 'NOW')
// client.Chart.onPaint()
// });
// }
</script>