最后修改时间:2022-12-15 18:10
K线图(又称蜡烛图)表示的是每个周期的股价变化情况,包括开票价、最高价、最低价格和收盘价,形如下图
其中开盘价大于收盘价为涨,一般用红色表示,开盘价小于收盘价为跌,一般用绿色表示(红绿色是国内的习惯)。
蜡烛图中的每个数据点包含五个数据,分别是 时间戳, 开盘价, 最高价, 最低价, 收盘价,实例如下:
data: [
[1147651200000, 67.37, 68.38, 67.12, 67.79],
[1147737600000, 68.1, 68.25, 64.75, 64.98]
]
可以通过 seres.color
和 series.lineColor
来控制走势为跌的柱形颜色和线条颜色,series.upColor
和 series.upLineColor
来控制走势为涨的柱形颜色和线条颜色
series: [{
type: 'candlestick',
data: [],
// 控制走势为跌的蜡烛颜色
color: 'green',
lineColor: 'green',
// 控制走势为涨的蜡烛颜色
upColor: 'red',
upLineColor: 'red'
}]
另外还可以在 css 中设置,代码如下:
.highcharts-point-up {
fill: red;
stroke: red;
}
.highcharts-point-down {
fill: green;
stroke: green;
}
更多相关内容:
设置数据列的类型为 ohlc
即可将图形变成 OHCL 型 K线,其表达的内容和蜡烛图一样,只是形状不同。
将蜡烛图的柱形填充颜色设置为透明即可实现空心蜡烛图,代码如下:
series: [{
type: 'candlestick',
data: [],
// 控制走势为跌的蜡烛颜色
color: 'transparent', // 或 rgba(0,0,0,0)
lineColor: 'green',
// 控制走势为跌的蜡烛颜色
upColor: 'transparent',
upLineColor: 'red'
}]
自定义 tooltip.pointFormat 即可
plotOptions: {
ohlc: {
tooltip: {
pointFormat: '<span style="color:{point.color}">\u25CF</span> <b> {series.name}</b><br/>' +
'开盘: {point.open}<br/>' +
'最高: {point.high}<br/>' +
'最低: {point.low}<br/>' +
'收盘: {point.close}<br/>'
}
}
}
本教程仅用于学习、研究和交流目的,欢迎非商业转载。转载请注明出处及完整的链接。
订阅更新
尊敬的用户您好:
由于域名备案调整,我们将于 2023-01-01 ~ 2023-01-07 日陆续停用 highcharts.com.cn 域名,受影响的网站及域名如下:
网站或服务名称 | 域名 | 替代的网站 |
---|---|---|
主站 | www.highcharts.com.cn | www.hcharts.cn |
静态资源服务/CDN | cdn.highcharts.com.cn code.highcharts.com.cn | code.hcharts.cn |
img.highcharts.com.cn | img.hcharts.cn | |
API 文档 | api.highcharts.com.cn | api.hcharts.cn |
导出服务 | export.highcharts.com.cn | export.hcharts.cn |
以上网站服务及 highcharts.com.cn 域名下的网站将于 2023-01-08 日全部下线,未来一段时间将不可访问,后续我们将上线新的网站。
如果您的应用中有使用到相关服务,请抓紧时间对链接进行调整(特别是静态资源/CDN 服务的链接),以免影响您的网站或应用的正常运行,由此给您带来的不便,敬请谅解。
如需帮助,请及时与我们联系:0571-86208605 / 18106595564(微信)。
简数科技 2022-12-22