samples/demo/mdayline.html
<!DOCTYPE html>
<link href="https://fonts.googleapis.com/css?family=Cousine|Roboto+Mono" rel="stylesheet">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ClChat Demo</title>
<link rel="stylesheet" href="../css/client.css">
</head>
<body>
<div id="container" class="container">
</div>
<script src="../ClChart.js"></script>
<script src="../SisClient.js"></script>
<script src="./config.js"></script>
<script>
const container = document.getElementById('container')
const syscfg = {
scale: window.devicePixelRatio,
axisPlatform: 'web', // 'phone' | 'web'
container: container
}
const mainCanvas ={
width: container.offsetWidth * window.devicePixelRatio,
height: container.offsetHeight * window.devicePixelRatio,
}
// Create a single stock Chart instance
const Chart = ClChart.createSingleChart(syscfg)
let isInited = false;
function initLayout() {
if (isInited) return;
isInited = true;
Chart.clearLayout();
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
}
}
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
}
}
Chart.createChart('user.mday.vol', 'system.chart', volumeLayoutCfg, function (result) {
// console.log(result)
})
}
function paintDrawline() {
const code = sisdb.code
let infoData
Promise.all([
sisClient.getData(code, 'info'),
sisClient.getData(code, 'mday', { search:{ start:-1200,stop:-1 } }),
sisClient.getData(code, 'now')
])
.then(([infoData, mdayData, nowData]) => {
Chart.clear()
Chart.initData(sisdb.tradeDate, ClChart.DEF_DATA.STOCK_TRADETIME)
Chart.setData('INFO', ClChart.DEF_DATA.FIELD_INFO, infoData.values)
Chart.setData('MDAY', ClChart.DEF_DATA.FIELD_TICK, mdayData.values)
Chart.setData('NOW', ClChart.DEF_DATA.FIELD_NOW, nowData.values)
Chart.bindData(Chart.getChart('user.mday.line'), 'MDAY')
Chart.bindData(Chart.getChart('user.mday.vol'), 'MDAY')
Chart.onPaint()
})
}
window.onload = () => {
initLayout()
paintDrawline()
}
</script>
</body>
</html>