shen/KLineChart
1
0
Fork 0
mirror of https://github.com/klinecharts/KLineChart.git synced 2024-11-25 16:22:43 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

test: test case

Browse Source
This commit is contained in:
lihu 2023-01-09 22:16:51 +08:00
parent f8ee69aba6
commit 4e0518a453
29 changed files with 1054 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
src/extension/styles/dark.ts Normal file
View File

@ -0,0 +1,100 @@
/**
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import DeepPartial from '../../common/DeepPartial'
import { Styles } from '../../common/Options'
const dark: DeepPartial<Styles> = {
grid: {
horizontal: {
color: '#292929'
},
vertical: {
color: '#292929'
}
},
candle: {
priceMark: {
high: {
color: '#929AA5'
},
low: {
color: '#929AA5'
}
},
tooltip: {
rect: {
color: 'rgba(10, 10, 10, .6)',
borderColor: 'rgba(10, 10, 10, .6)'
},
text: {
color: '#929AA5'
}
}
},
indicator: {
tooltip: {
text: {
color: '#929AA5'
}
}
},
xAxis: {
axisLine: {
color: '#333333'
},
tickText: {
color: '#929AA5'
},
tickLine: {
color: '#333333'
}
},
yAxis: {
axisLine: {
color: '#333333'
},
tickText: {
color: '#929AA5'
},
tickLine: {
color: '#333333'
}
},
separator: {
color: '#333333'
},
crosshair: {
horizontal: {
line: {
color: '#929AA5'
},
text: {
borderColor: '#373a40',
backgroundColor: '#373a40'
}
},
vertical: {
line: {
color: '#929AA5'
},
text: {
borderColor: '#373a40',
backgroundColor: '#373a40'
}
}
}
}
export default dark

74
tests/create-overlay3.html
View File

@ -1,74 +0,0 @@
<!--
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="keywords" content="kline time-line candlestick stock chart canvas k线 行情 蜡烛图 分时图 技术指标 图表"/>
<meta name="description" content="shape test"/>
<script type="text/javascript" src="../dist/klinecharts.min.js"></script>
<script type="text/javascript" src="./js/dataSource.js"></script>
<link rel="stylesheet" type="text/css" href="./css/chart.css"/>
<title>Create overlay</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="chart"></div>
<script>
window.onload = function () {
var chart = klinecharts.init('chart')
chart.createIndicator('MACD')
chart.applyNewData(generated())
var dataList = chart.getDataList()
var data2 = dataList[dataList.length - 100]
var data1 = dataList[dataList.length - 40]
chart.createOverlay({
name: 'priceChannelLine',
points: [{ timestamp: data1.timestamp, value: data1.low }, { timestamp: data2.timestamp, value: data2.high }],
onDrawStart: function (event) {
console.log('onDrawStart: ', event)
},
onDrawing: function (event) {
console.log('onDrawing: ', event)
},
onDrawEnd: function (event) {
console.log('onDrawEnd: ', event)
},
onClick: function (event) {
console.log('onClick: ', event)
},
onRightClick: function (event) {
console.log('onRightClick: ', event)
// return true
},
onPressedMove: function (event) {
console.log('onPressedMove: ', event)
},
onMouseEnter: function (event) {
console.log('onMouseEnter: ', event)
},
onMouseLeave: function (event) {
console.log('onMouseLeave: ', event)
},
onRemove: function (event) {
console.log('onRemove: ', event)
}
})
}
</script>
</body>
</html>

60
tests/html/custom-api/1.html Normal file
View File

@ -0,0 +1,60 @@
<!--
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="keywords" content="kline time-line candlestick stock chart canvas k线 行情 蜡烛图 分时图 技术指标 图表"/>
<meta name="description" content="shape test"/>
<script type="text/javascript" src="../../../dist/klinecharts.min.js"></script>
<script type="text/javascript" src="../../js/dataSource.js"></script>
<link rel="stylesheet" type="text/css" href="../../css/chart.css"/>
<title>Custom Api -- Initialize settings</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="chart"></div>
<script>
window.onload = function () {
var chart = klinecharts.init('chart', {
customApi: {
formatDate: function (dateTimeFormat, timestamp, format, type) {
return klinecharts.utils.formatDate(dateTimeFormat, timestamp, 'YYYY-MM-DD HH:mm:ss')
},
formatBigNumber: function (value) {
const v = +value
if (klinecharts.utils.isNumber(v)) {
if (value > 1000000000) {
return `${+((v / 1000000000).toFixed(3))}十亿`
}
if (value > 1000000) {
return `${+((v / 1000000).toFixed(3))}百万`
}
if (value > 1000) {
return `${+((v / 1000).toFixed(3))}千`
}
return `${value}`
}
return '--'
}
}
})
chart.applyNewData(generated(), true)
}
</script>
</body>
</html>

59
tests/html/custom-api/2.html Normal file
View File

@ -0,0 +1,59 @@
<!--
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="keywords" content="kline time-line candlestick stock chart canvas k线 行情 蜡烛图 分时图 技术指标 图表"/>
<meta name="description" content="shape test"/>
<script type="text/javascript" src="../../../dist/klinecharts.min.js"></script>
<script type="text/javascript" src="../../js/dataSource.js"></script>
<link rel="stylesheet" type="text/css" href="../../css/chart.css"/>
<title>Custom Api - Api settings</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="chart"></div>
<script>
window.onload = function () {
var chart = klinecharts.init('chart')
chart.setCustomApi({
formatDate: function (dateTimeFormat, timestamp, format, type) {
return klinecharts.utils.formatDate(dateTimeFormat, timestamp, 'YYYY-MM-DD HH:mm:ss')
},
formatBigNumber: function (value) {
const v = +value
if (klinecharts.utils.isNumber(v)) {
if (value > 1000000000) {
return `${+((v / 1000000000).toFixed(3))}十亿`
}
if (value > 1000000) {
return `${+((v / 1000000).toFixed(3))}百万`
}
if (value > 1000) {
return `${+((v / 1000).toFixed(3))}千`
}
return `${value}`
}
return '--'
}
})
chart.applyNewData(generated(), true)
}
</script>
</body>
</html>

52
tests/html/data/1.html Normal file
View File

@ -0,0 +1,52 @@
<!--
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="keywords" content="kline time-line candlestick stock chart canvas k线 行情 蜡烛图 分时图 技术指标 图表"/>
<meta name="description" content="shape test"/>
<script type="text/javascript" src="../../../dist/klinecharts.min.js"></script>
<script type="text/javascript" src="../../js/dataSource.js"></script>
<link rel="stylesheet" type="text/css" href="../../css/chart.css"/>
<title>Data -- Real time update</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="chart"></div>
<script>
window.onload = function () {
var chart = klinecharts.init('chart')
chart.createIndicator('VOL')
chart.applyNewData(generated(), true)
function update () {
setTimeout(function() {
const kLineDataList = chart.getDataList()
const data = { ...kLineDataList[kLineDataList.length - 1] }
data.close = data.close + (Math.random() * 10 - 5)
data.high = Math.max(data.close, data.high)
data.low = Math.min(data.close, data.low)
data.volume += Math.round(Math.random() * 20)
chart.updateData(data)
update()
}, 1000)
}
update()
}
</script>
</body>
</html>

8
tests/load-more.html → tests/html/data/2.html
View File

@ -20,10 +20,10 @@ limitations under the License.
<meta name="theme-color" content="#000000" />
<meta name="keywords" content="kline time-line candlestick stock chart canvas k线 行情 蜡烛图 分时图 技术指标 图表"/>
<meta name="description" content="shape test"/>
<script type="text/javascript" src="../dist/klinecharts.min.js"></script>
<script type="text/javascript" src="./js/dataSource.js"></script>
<link rel="stylesheet" type="text/css" href="./css/chart.css"/>
<title>Load more</title>
<script type="text/javascript" src="../../../dist/klinecharts.min.js"></script>
<script type="text/javascript" src="../../js/dataSource.js"></script>
<link rel="stylesheet" type="text/css" href="../../css/chart.css"/>
<title>Data -- Load more</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

40
tests/html/i18n/1.html Normal file
View File

@ -0,0 +1,40 @@
<!--
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="keywords" content="kline time-line candlestick stock chart canvas k线 行情 蜡烛图 分时图 技术指标 图表"/>
<meta name="description" content="shape test"/>
<script type="text/javascript" src="../../../dist/klinecharts.min.js"></script>
<script type="text/javascript" src="../../js/dataSource.js"></script>
<link rel="stylesheet" type="text/css" href="../../css/chart.css"/>
<title>I18n -- Initialize settings</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="chart"></div>
<script>
window.onload = function () {
var chart = klinecharts.init('chart', {
locale: 'zh-CN'
})
chart.applyNewData(generated(), true)
}
</script>
</body>
</html>

39
tests/html/i18n/2.html Normal file
View File

@ -0,0 +1,39 @@
<!--
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="keywords" content="kline time-line candlestick stock chart canvas k线 行情 蜡烛图 分时图 技术指标 图表"/>
<meta name="description" content="shape test"/>
<script type="text/javascript" src="../../../dist/klinecharts.min.js"></script>
<script type="text/javascript" src="../../js/dataSource.js"></script>
<link rel="stylesheet" type="text/css" href="../../css/chart.css"/>
<title>I18n -- Api settings</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="chart"></div>
<script>
window.onload = function () {
var chart = klinecharts.init('chart')
chart.setLocale('zh-CN')
chart.applyNewData(generated(), true)
}
</script>
</body>
</html>

48
tests/html/i18n/3.html Normal file
View File

@ -0,0 +1,48 @@
<!--
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="keywords" content="kline time-line candlestick stock chart canvas k线 行情 蜡烛图 分时图 技术指标 图表"/>
<meta name="description" content="shape test"/>
<script type="text/javascript" src="../../../dist/klinecharts.min.js"></script>
<script type="text/javascript" src="../../js/dataSource.js"></script>
<link rel="stylesheet" type="text/css" href="../../css/chart.css"/>
<title>I18n -- Register</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="chart"></div>
<script>
window.onload = function () {
klinecharts.registerLocale('zh-HK', {
time: '時間：',
open: '開：',
high: '高：',
low: '低：',
close: '收：',
volume: '成交量：'
})
var chart = klinecharts.init('chart', {
locale: 'zh-HK'
})
chart.applyNewData(generated(), true)
}
</script>
</body>
</html>

9
tests/indicator.html → tests/html/indicator/1.html
View File

@ -20,14 +20,15 @@ limitations under the License.
<meta name="theme-color" content="#000000" />
<meta name="keywords" content="kline time-line candlestick stock chart canvas k线 行情 蜡烛图 分时图 技术指标 图表"/>
<meta name="description" content="shape test"/>
<script type="text/javascript" src="../dist/klinecharts.js"></script>
<script type="text/javascript" src="./js/dataSource.js"></script>
<link rel="stylesheet" type="text/css" href="./css/chart.css"/>
<title>Indicator</title>
<script type="text/javascript" src="../../../dist/klinecharts.min.js"></script>
<script type="text/javascript" src="../../js/dataSource.js"></script>
<link rel="stylesheet" type="text/css" href="../../css/chart.css"/>
<title>Indicator -- Use built-in indicators</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="chart"></div>
<div></div>
<script>
window.onload = function () {
var chart = klinecharts.init('chart')

18
tests/indicator-override.html → tests/html/indicator/2.html
View File

@ -20,10 +20,10 @@ limitations under the License.
<meta name="theme-color" content="#000000" />
<meta name="keywords" content="kline time-line candlestick stock chart canvas k线 行情 蜡烛图 分时图 技术指标 图表"/>
<meta name="description" content="shape test"/>
<script type="text/javascript" src="../dist/klinecharts.min.js"></script>
<script type="text/javascript" src="./js/dataSource.js"></script>
<link rel="stylesheet" type="text/css" href="./css/chart.css"/>
<title>Override indicator</title>
<script type="text/javascript" src="../../../dist/klinecharts.min.js"></script>
<script type="text/javascript" src="../../js/dataSource.js"></script>
<link rel="stylesheet" type="text/css" href="../../css/chart.css"/>
<title>Indicator -- Override</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
@ -31,7 +31,7 @@ limitations under the License.
<script>
window.onload = function () {
var chart = klinecharts.init('chart')
// 创建的时候直接修改
// Modify directly when creating
chart.createIndicator({
name: 'MA',
precision: 3,
@ -44,10 +44,10 @@ limitations under the License.
}
}, false, { id: 'candle_pane' })
// 创建两个相同的EMA副图指标
// Create two identical EMA sub graph indicators
chart.createIndicator('EMA')
chart.createIndicator('EMA')
// 修改所有创建好的EMA指标
// Modify all created EMA indicators
chart.overrideIndicator({
name: 'EMA',
precision: 3,
@ -60,10 +60,10 @@ limitations under the License.
}
})
// 创建两个相同的BOLL副图指标
// Create two identical BOLL sub graph indicators
var bollPaneId = chart.createIndicator('BOLL')
chart.createIndicator('BOLL')
// 修改指定窗口上创建好的BOLL指标
// Modify the created BOLL indicator in the specified window
chart.overrideIndicator({
name: 'BOLL',
precision: 3,

14
tests/custom-indicator1.html → tests/html/indicator/3.html
View File

@ -20,10 +20,10 @@ limitations under the License.
<meta name="theme-color" content="#000000" />
<meta name="keywords" content="kline time-line candlestick stock chart canvas k线 行情 蜡烛图 分时图 技术指标 图表"/>
<meta name="description" content="shape test"/>
<script type="text/javascript" src="../dist/klinecharts.min.js"></script>
<script type="text/javascript" src="./js/dataSource.js"></script>
<link rel="stylesheet" type="text/css" href="./css/chart.css"/>
<title>Custom indicator</title>
<script type="text/javascript" src="../../../dist/klinecharts.min.js"></script>
<script type="text/javascript" src="../../js/dataSource.js"></script>
<link rel="stylesheet" type="text/css" href="../../css/chart.css"/>
<title>Indicator -- Custom1</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
@ -36,12 +36,12 @@ limitations under the License.
calcParams: [5.5],
precision: 2,
figures: [{ key: 'price', title: 'price: ', type: 'line' }],
calc: function (kLineDataList) {
return Promise.resolve(kLineDataList.map(kLineData => ({ price: kLineData.close / params[0] })))
calc: function (kLineDataList, indicator) {
return Promise.resolve(kLineDataList.map(kLineData => ({ price: kLineData.close / indicator.calcParams[0] })))
}
})
var chart = klinecharts.init('chart')
chart.createTechnicalIndicator('TEST')
chart.createIndicator('TEST')
chart.applyNewData(generated())
}
</script>

8
tests/custom-indicator2.html → tests/html/indicator/4.html
View File

@ -20,10 +20,10 @@ limitations under the License.
<meta name="theme-color" content="#000000" />
<meta name="keywords" content="kline time-line candlestick stock chart canvas k线 行情 蜡烛图 分时图 技术指标 图表"/>
<meta name="description" content="shape test"/>
<script type="text/javascript" src="../dist/klinecharts.js"></script>
<script type="text/javascript" src="./js/dataSource.js"></script>
<link rel="stylesheet" type="text/css" href="./css/chart.css"/>
<title>Custom indicator</title>
<script type="text/javascript" src="../../../dist/klinecharts.min.js"></script>
<script type="text/javascript" src="../../js/dataSource.js"></script>
<link rel="stylesheet" type="text/css" href="../../css/chart.css"/>
<title>Indicator -- Custom2</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

10
tests/create-overlay1.html → tests/html/overlay/1.html
View File

@ -20,10 +20,10 @@ limitations under the License.
<meta name="theme-color" content="#000000" />
<meta name="keywords" content="kline time-line candlestick stock chart canvas k线 行情 蜡烛图 分时图 技术指标 图表"/>
<meta name="description" content="shape test"/>
<script type="text/javascript" src="../dist/klinecharts.min.js"></script>
<script type="text/javascript" src="./js/dataSource.js"></script>
<link rel="stylesheet" type="text/css" href="./css/chart.css"/>
<title>Create overlay</title>
<script type="text/javascript" src="../../../dist/klinecharts.min.js"></script>
<script type="text/javascript" src="../../js/dataSource.js"></script>
<link rel="stylesheet" type="text/css" href="../../css/chart.css"/>
<title>Overlay -- Use built-in overlays</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
@ -31,7 +31,7 @@ limitations under the License.
<script>
window.onload = function () {
var chart = klinecharts.init('chart')
chart.createIndicator('KDJ')
chart.createIndicator('EMA')
chart.applyNewData(generated())
// Create any
chart.createOverlay('segment')

8
tests/simple-overlay.html → tests/html/overlay/2.html
View File

@ -20,10 +20,10 @@ limitations under the License.
<meta name="theme-color" content="#000000" />
<meta name="keywords" content="kline time-line candlestick stock chart canvas k线 行情 蜡烛图 分时图 技术指标 图表"/>
<meta name="description" content="shape test"/>
<script type="text/javascript" src="../dist/klinecharts.js"></script>
<script type="text/javascript" src="./js/dataSource.js"></script>
<link rel="stylesheet" type="text/css" href="./css/chart.css"/>
<title>Simple overlay</title>
<script type="text/javascript" src="../../../dist/klinecharts.min.js"></script>
<script type="text/javascript" src="../../js/dataSource.js"></script>
<link rel="stylesheet" type="text/css" href="../../css/chart.css"/>
<title>Overlay -- Use built-in overlays</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

12
tests/overlay-override.html → tests/html/overlay/3.html
View File

@ -20,9 +20,9 @@ limitations under the License.
<meta name="theme-color" content="#000000" />
<meta name="keywords" content="kline time-line candlestick stock chart canvas k线 行情 蜡烛图 分时图 技术指标 图表"/>
<meta name="description" content="shape test"/>
<script type="text/javascript" src="../dist/klinecharts.min.js"></script>
<script type="text/javascript" src="./js/dataSource.js"></script>
<link rel="stylesheet" type="text/css" href="./css/chart.css"/>
<script type="text/javascript" src="../../../dist/klinecharts.min.js"></script>
<script type="text/javascript" src="../../js/dataSource.js"></script>
<link rel="stylesheet" type="text/css" href="../../css/chart.css"/>
<title>Overlay override</title>
</head>
<body>
@ -31,7 +31,7 @@ limitations under the License.
<script>
window.onload = function () {
var chart = klinecharts.init('chart')
// 新增一个图形模板
// Register overlay
klinecharts.registerOverlay({
name: 'circle',
needDefaultPointFigure: true,
@ -69,13 +69,13 @@ limitations under the License.
}
})
chart.applyNewData(generated())
// 创建
// Create overlay
chart.createOverlay({
name: 'circle',
extendData: 'Override overlay',
styles: { text: { color: 'rgba(100, 10, 200, .3)' } },
onDrawEnd: function ({ overlay }) {
// 监听绘制完成，覆盖属性
// Listen to the completion of drawing and overwrite the attribute
chart.overrideOverlay({
id: overlay.id,
lock: true,

13
tests/time-zone.html → tests/html/set-bar-width.html
View File

@ -20,10 +20,10 @@ limitations under the License.
<meta name="theme-color" content="#000000" />
<meta name="keywords" content="kline time-line candlestick stock chart canvas k线 行情 蜡烛图 分时图 技术指标 图表"/>
<meta name="description" content="shape test"/>
<script type="text/javascript" src="../dist/klinecharts.min.js"></script>
<script type="text/javascript" src="./js/dataSource.js"></script>
<link rel="stylesheet" type="text/css" href="./css/chart.css"/>
<title>时区</title>
<script type="text/javascript" src="../../dist/klinecharts.min.js"></script>
<script type="text/javascript" src="../js/dataSource.js"></script>
<link rel="stylesheet" type="text/css" href="../css/chart.css"/>
<title>Set bar width</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
@ -31,11 +31,8 @@ limitations under the License.
<script>
window.onload = function () {
var chart = klinecharts.init('chart')
chart.createIndicator('KDJ')
chart.setBarSpace(10)
chart.applyNewData(generated(), true)
setTimeout(function () {
chart.setTimezone('Europe/Berlin')
}, 2000)
}
</script>
</body>

40
tests/html/set-pane-options.html Normal file
View File

@ -0,0 +1,40 @@
<!--
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="keywords" content="kline time-line candlestick stock chart canvas k线 行情 蜡烛图 分时图 技术指标 图表"/>
<meta name="description" content="shape test"/>
<script type="text/javascript" src="../../dist/klinecharts.min.js"></script>
<script type="text/javascript" src="../js/dataSource.js"></script>
<link rel="stylesheet" type="text/css" href="../css/chart.css"/>
<title>Set pane options</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="chart"></div>
<script>
window.onload = function () {
var chart = klinecharts.init('chart')
var paneId = chart.createIndicator('EMA')
chart.applyNewData(generated(), true)
chart.setPaneOptions({ id: paneId, height: 300, dragEnabled: false, gap: { top: 0.3, bottom: 0.3 } })
}
</script>
</body>
</html>

39
tests/html/set-precision.html Normal file
View File

@ -0,0 +1,39 @@
<!--
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="keywords" content="kline time-line candlestick stock chart canvas k线 行情 蜡烛图 分时图 技术指标 图表"/>
<meta name="description" content="shape test"/>
<script type="text/javascript" src="../../dist/klinecharts.min.js"></script>
<script type="text/javascript" src="../js/dataSource.js"></script>
<link rel="stylesheet" type="text/css" href="../css/chart.css"/>
<title>Set precision</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="chart"></div>
<script>
window.onload = function () {
var chart = klinecharts.init('chart')
chart.setPriceVolumePrecision(4, 4)
chart.applyNewData(generated(), true)
}
</script>
</body>
</html>

8
tests/styles.html → tests/html/styles/1.html
View File

@ -20,10 +20,10 @@ limitations under the License.
<meta name="theme-color" content="#000000" />
<meta name="keywords" content="kline time-line candlestick stock chart canvas k线 行情 蜡烛图 分时图 技术指标 图表"/>
<meta name="description" content="shape test"/>
<script type="text/javascript" src="../dist/klinecharts.min.js"></script>
<script type="text/javascript" src="./js/dataSource.js"></script>
<link rel="stylesheet" type="text/css" href="./css/chart.css"/>
<title>初始化更改样式</title>
<script type="text/javascript" src="../../../dist/klinecharts.min.js"></script>
<script type="text/javascript" src="../../js/dataSource.js"></script>
<link rel="stylesheet" type="text/css" href="../../css/chart.css"/>
<title>Styles -- Initialize Settings</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

38
tests/html/styles/2.html Normal file
View File

@ -0,0 +1,38 @@
<!--
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="keywords" content="kline time-line candlestick stock chart canvas k线 行情 蜡烛图 分时图 技术指标 图表"/>
<meta name="description" content="shape test"/>
<script type="text/javascript" src="../../../dist/klinecharts.min.js"></script>
<script type="text/javascript" src="../../js/dataSource.js"></script>
<link rel="stylesheet" type="text/css" href="../../css/chart.css"/>
<title>Styles -- Initialize Settings</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="chart" style="background-color: #222222"></div>
<script>
window.onload = function () {
var chart = klinecharts.init('chart', { styles: 'dark' })
chart.applyNewData(generated())
}
</script>
</body>
</html>

113
tests/html/styles/3.html Normal file
View File

@ -0,0 +1,113 @@
<!--
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="keywords" content="kline time-line candlestick stock chart canvas k线 行情 蜡烛图 分时图 技术指标 图表"/>
<meta name="description" content="shape test"/>
<script type="text/javascript" src="../../../dist/klinecharts.min.js"></script>
<script type="text/javascript" src="../../js/dataSource.js"></script>
<link rel="stylesheet" type="text/css" href="../../css/chart.css"/>
<title>Styles -- Api Settings</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="chart" style="background-color: #222222"></div>
<script>
window.onload = function () {
var chart = klinecharts.init('chart')
chart.setStyles({
grid: {
horizontal: {
color: '#292929'
},
vertical: {
color: '#292929'
}
},
candle: {
priceMark: {
high: {
color: '#929AA5'
},
low: {
color: '#929AA5'
}
},
tooltip: {
text: {
color: '#929AA5'
}
}
},
indicator: {
tooltip: {
text: {
color: '#929AA5'
}
}
},
xAxis: {
axisLine: {
color: '#333333'
},
tickLine: {
color: '#333333'
},
tickText: {
color: '#929AA5'
}
},
yAxis: {
axisLine: {
color: '#333333'
},
tickLine: {
color: '#333333'
},
tickText: {
color: '#929AA5'
}
},
separator: {
color: '#333333'
},
crosshair: {
horizontal: {
line: {
color: '#666666'
},
text: {
backgroundColor: '#373a40'
}
},
vertical: {
line: {
color: '#666666'
},
text: {
backgroundColor: '#373a40'
}
}
}
})
chart.applyNewData(generated())
}
</script>
</body>
</html>

14
tests/create-overlay2.html → tests/html/styles/4.html
View File

@ -20,21 +20,19 @@ limitations under the License.
<meta name="theme-color" content="#000000" />
<meta name="keywords" content="kline time-line candlestick stock chart canvas k线 行情 蜡烛图 分时图 技术指标 图表"/>
<meta name="description" content="shape test"/>
<script type="text/javascript" src="../dist/klinecharts.min.js"></script>
<script type="text/javascript" src="./js/dataSource.js"></script>
<link rel="stylesheet" type="text/css" href="./css/chart.css"/>
<title>Create overlay</title>
<script type="text/javascript" src="../../../dist/klinecharts.min.js"></script>
<script type="text/javascript" src="../../js/dataSource.js"></script>
<link rel="stylesheet" type="text/css" href="../../css/chart.css"/>
<title>Styles -- Api Settings</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="chart"></div>
<div id="chart" style="background-color: #222222"></div>
<script>
window.onload = function () {
var chart = klinecharts.init('chart')
chart.createIndicator('MACD')
chart.setStyles('dark')
chart.applyNewData(generated())
// Create on main
chart.createOverlay('segment', 'candle_pane')
}
</script>
</body>

113
tests/html/styles/5.html Normal file
View File

@ -0,0 +1,113 @@
<!--
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="keywords" content="kline time-line candlestick stock chart canvas k线 行情 蜡烛图 分时图 技术指标 图表"/>
<meta name="description" content="shape test"/>
<script type="text/javascript" src="../../../dist/klinecharts.min.js"></script>
<script type="text/javascript" src="../../js/dataSource.js"></script>
<link rel="stylesheet" type="text/css" href="../../css/chart.css"/>
<title>Styles -- Register Styles</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="chart" style="background-color: #222222"></div>
<script>
window.onload = function () {
klinecharts.registerStyles('green', {
grid: {
horizontal: {
color: '#00ff00'
},
vertical: {
color: '#00ff00'
}
},
candle: {
priceMark: {
high: {
color: '#00ff00'
},
low: {
color: '#00ff00'
}
},
tooltip: {
text: {
color: '#00ff00'
}
}
},
indicator: {
tooltip: {
text: {
color: '#00ff00'
}
}
},
xAxis: {
axisLine: {
color: '#00ff00'
},
tickLine: {
color: '#00ff00'
},
tickText: {
color: '#00ff00'
}
},
yAxis: {
axisLine: {
color: '#00ff00'
},
tickLine: {
color: '#00ff00'
},
tickText: {
color: '#00ff00'
}
},
separator: {
color: '#00ff00'
},
crosshair: {
horizontal: {
line: {
color: '#00ff00'
},
text: {
backgroundColor: '#00ff00'
}
},
vertical: {
line: {
color: '#00ff00'
},
text: {
backgroundColor: '#00ff00'
}
}
}
})
var chart = klinecharts.init('chart', { styles: 'green' })
chart.applyNewData(generated())
}
</script>
</body>
</html>

55
tests/html/styles/6.html Normal file
View File

@ -0,0 +1,55 @@
<!--
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="keywords" content="kline time-line candlestick stock chart canvas k线 行情 蜡烛图 分时图 技术指标 图表"/>
<meta name="description" content="shape test"/>
<script type="text/javascript" src="../../../dist/klinecharts.min.js"></script>
<script type="text/javascript" src="../../js/dataSource.js"></script>
<link rel="stylesheet" type="text/css" href="../../css/chart.css"/>
<title>Styles -- Rect tooltip</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="chart"></div>
<script>
window.onload = function () {
var chart = klinecharts.init('chart', {
styles: {
candle: {
tooltip: {
showType: 'rect'
}
},
indicator: {
tooltip: {
showType: 'rect'
}
}
}
})
chart.createIndicator('MA', false, { id: 'candle_pane' })
chart.createIndicator('EMA', true, { id: 'candle_pane' })
chart.createIndicator('VOL')
chart.createIndicator('MACD')
chart.applyNewData(generated(), true)
}
</script>
</body>
</html>

40
tests/html/timezone/1.html Normal file
View File

@ -0,0 +1,40 @@
<!--
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="keywords" content="kline time-line candlestick stock chart canvas k线 行情 蜡烛图 分时图 技术指标 图表"/>
<meta name="description" content="shape test"/>
<script type="text/javascript" src="../../../dist/klinecharts.min.js"></script>
<script type="text/javascript" src="../../js/dataSource.js"></script>
<link rel="stylesheet" type="text/css" href="../../css/chart.css"/>
<title>Timezone -- Initialize Settings</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="chart"></div>
<script>
window.onload = function () {
var chart = klinecharts.init('chart', {
timezone: 'Europe/Berlin'
})
chart.applyNewData(generated(), true)
}
</script>
</body>
</html>

39
tests/html/timezone/2.html Normal file
View File

@ -0,0 +1,39 @@
<!--
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="keywords" content="kline time-line candlestick stock chart canvas k线 行情 蜡烛图 分时图 技术指标 图表"/>
<meta name="description" content="shape test"/>
<script type="text/javascript" src="../../../dist/klinecharts.min.js"></script>
<script type="text/javascript" src="../../js/dataSource.js"></script>
<link rel="stylesheet" type="text/css" href="../../css/chart.css"/>
<title>Timezone -- Api Settings</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="chart"></div>
<script>
window.onload = function () {
var chart = klinecharts.init('chart')
chart.setTimezone('Europe/Berlin')
chart.applyNewData(generated(), true)
}
</script>
</body>
</html>

119
tests/index.html Normal file
View File

@ -0,0 +1,119 @@
<!--
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="keywords" content="kline time-line candlestick stock chart canvas k线 行情 蜡烛图 分时图 技术指标 图表"/>
<meta name="description" content="shape test"/>
<title>KLineChart test cases</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<style>
h1 {
padding-left: 0.7em
}
</style>
<h1>Test cases</h1>
<div id="case-list"></div>
<script>
window.onload = function () {
var cases = [
{
title: 'Styles',
children: [
{ title: 'Initialize settings, custom styles', link: './html/styles/1.html' },
{ title: 'Initialize settings, use built-in styles', link: './html/styles/2.html' },
{ title: 'Api settings, custom styles', link: './html/styles/3.html' },
{ title: 'Api settings, use built-in styles', link: './html/styles/4.html' },
{ title: 'Register styles', link: './html/styles/5.html' },
{ title: 'Rect tooltip', link: './html/styles/6.html' }
]
},
{
title: 'I18n',
children: [
{ title: 'Initialize settings', link: './html/i18n/1.html' },
{ title: 'Api settings', link: './html/i18n/2.html' },
{ title: 'Register locale', link: './html/i18n/3.html' }
]
},
{
title: 'Timezone',
children: [
{ title: 'Initialize settings', link: './html/timezone/1.html' },
{ title: 'Api settings', link: './html/timezone/2.html' }
]
},
{
title: 'Custom api',
children: [
{ title: 'Initialize settings', link: './html/custom-api/1.html' },
{ title: 'Api settings', link: './html/custom-api/2.html' }
]
},
{
title: 'Data',
children: [
{ title: 'Real time update', link: './html/data/1.html' },
{ title: 'Load more', link: './html/data/2.html' }
]
},
{
title: 'Indicator',
children: [
{ title: 'Use built-in indicators', link: './html/indicator/1.html' },
{ title: 'Indicator override', link: './html/indicator/2.html' },
{ title: 'Simple custom Indicator', link: './html/indicator/3.html' },
{ title: 'Custom Indicator, use custom draw', link: './html/indicator/4.html' }
]
},
{
title: 'Overlay',
children: [
{ title: 'Use built-in overlays', link: './html/overlay/1.html' },
{ title: 'Use built-in overlays, specify points', link: './html/overlay/2.html' },
{ title: 'Overlay override', link: './html/overlay/3.html' }
]
},
{ title: 'Set precision', link: './html/set-precision.html' },
{ title: 'Set bar width', link: './html/set-bar-width.html' },
{ title: 'Set pane options', link: './html/set-pane-options.html' }
]
var html = '<ul>'
cases.forEach(function (child) {
var childHtml = '<li>'
if (child.children) {
var grandsonHtml = '<p>' + child.title + '</p>' + '<ul>'
child.children.forEach(function (grandson) {
grandsonHtml += '<li>' + '<a target="_blank" href="' + grandson.link + '">' + grandson.title + '</a>' + '</li>'
})
grandsonHtml += '</ul>'
childHtml += grandsonHtml
} else {
childHtml += ('<a target="_blank" href="' + child.link + '">' + child.title + '</a>')
}
childHtml += '</li>'
html += childHtml
})
html += '</ul>'
document.getElementById('case-list').innerHTML = html
}
</script>
</body>
</html>

2
tests/js/dataSource.js
View File

@ -8025,7 +8025,7 @@ function generated () {
high: +data[2],
low: +data[3],
close: +data[4],
volume: Math.ceil(+data[5])
volume: Math.ceil(+data[5] * 10000)
}
})
}