kline-chart
Version:
本项目基于某K线插件做了一些封装和二次开发,使插件更加易用,方便后来的开发者.
99 lines (75 loc) • 2.32 kB
HTML
<html>
<head>
<title>K线图</title>
<meta name="renderer" content="webkit"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<link href="/src/css/main.css" rel="stylesheet"/>
<script src="/lib/sockjs.js"></script>
<script src="/lib/stomp.js"></script>
<script src="/lib/jquery.js"></script>
<script src="/lib/jquery.mousewheel.js"></script>
<style type="text/css">
.kline {
width: 1200px;
margin-left: auto;
margin-right: auto;
height: 462px;
position: relative;
}
</style>
</head>
<body>
<div class="kline">
<h1>K线图</h1>
<div id="kline_container"></div>
<hr>
<input id="interval-time" type="text" value="5000">
<button id="socket-set-interval">Set Interval Time</button>
<hr>
<button id="socket-connect">Connect</button>
<button id="socket-disconnect">Disconnect</button>
<button id="socket-pause">Pause</button>
<button id="socket-resend">Resend</button>
</div>
<script src="/dist/kline.js"></script>
<script type="text/javascript">
var kline = new Kline({
element: "#kline_container",
width: 1200,
height: 650,
theme: 'dark', // light/dark
language: 'zh-cn', // zh-cn/en-us/zh-tw
ranges: ["1w", "1d", "1h", "30m", "15m", "5m", "1m", "line"],
symbol: "BTC",
symbolName: "BTC/USD",
type: "stomp", // poll/stomp
url: 'https://127.0.0.1/v1/socket',
limit: 1000,
intervalTime: 5000,
subscribePath: "/trade/kline",
sendPath: "/trade/kline",
debug: true,
showTrade: true,
enableSockjs: true
});
kline.draw();
$('#socket-pause').click(function () {
kline.pause();
});
$('#socket-resend').click(function () {
kline.resend();
});
$('#socket-connect').click(function () {
kline.connect();
});
$('#socket-disconnect').click(function () {
kline.disconnect();
});
$('#socket-set-interval').click(function () {
var intervalTime = $('#interval-time').val();
kline.setIntervalTime(intervalTime);
});
</script>
</body>
</html>