起步
安装
创建第一个JavaScript图表
图表要点
Series [处理数据]
响应式
动画
注释
数据标签
事件
交互性
格式化
格式化轴标签
日期时间
本地化
工具提示
网格
图例
图表类型
折线图(Line Chart)
面积图(Area Chart)
条形图(Bar Chart)
柱形图(Column Chart)
箱形图(BoxPlot)
烛台图(Candlestick)
范围条形图(Range Bar Chart)
热图图表(Heat Map Chart)
矩形树图(Treemap Chart)
多轴图表(Multi-Axis Chart)
饼图 / 圆环图(Pie / Donut)
雷达图(Radar)
径向条形图 / 仪表图(RadialBar / Circular Gauge)
同步图表(Synchronized charts)
设计
颜色
主题
渐变
图像填充
模式
滤镜
集成
Angular Charts
React Charts
Vue Charts
如何
放大类别 X 轴
自动换行和多行文本
从 JSON API 更新图表 & AJAX
选项(参考)
annotations
chart
animations
background
brush
defaultLocale
dropShadow
fontFamily
foreColor
group
events
height
id
locales
offsetX
offsetY
parentHeightOffset
redrawOnParentResize
redrawOnWindowResize
selection
sparkline
stacked
stackType
toolbar
type
width
zoom
colors
dataLabels
fill
forecastDataPoints
grid
labels
legend
markers
noData
plotOptions
area
bar
bubble
candlestick
boxPlot
heatmap
treemap
pie
polarArea
radar
radialBar
responsive
series
states
stroke
subtitle
theme
title
tooltip
xaxis
yaxis
方法
render
exec
updateOptions
updateSeries
appendSeries
toggleSeries
showSeries
hideSeries
zoomX
resetSeries
appendData
toggleDataPointSelection
addXaxisAnnotation
addYaxisAnnotation
addPointAnnotation
removeAnnotation
clearAnnotations
dataURI
destroy
setLocale
烛台图(Candlestick) - Apexcharts中文手册 - 笔下光年
网站首页
烛台图(Candlestick)
## 什么是烛台图? 烛台图(或蜡烛图)是一种描述证券、衍生品或货币价格变化的金融图表。烛台图和图表通常将数据表示为垂直轴上的数值,并比较不同时间的价格变动,将开盘价、最高价、最低价和收盘价可视化。 在本烛台图指南中,我们将介绍烛台图的数据格式。您将能够使用一些示例代码了解如何创建基本的烛台图表,并将探索如何进一步自定义它的不同选项。 ### 烛台数据格式 烛台的数据格式与其他图表略有不同。ApexCharts 假定您的数据采用 OHLC 格式,如下例所示。 #### 二维数组(成对) 多维数组格式接受 `[[Timestamp], [O, H, L, C]]` ```javascript series: [{ data: [ [1538856000000, [6593.34, 6600, 6582.63, 6600]], [1538856900000, [6595.16, 6604.76, 6590.73, 6593.86]] ] }] ``` #### 单个数组 单数组格式接受 `[Timestamp, O, H, L, C]` ```javascript series: [{ data: [ [1538856000000, 6593.34, 6600, 6582.63, 6600], [1538856900000, 6595.16, 6604.76, 6590.73, 6593.86] ] }] ``` #### xy格式 xy 格式接受 `[{ x: date, y: [O,H,L,C] }]`。 您还可以在 `x` 属性中传递时间戳而不是日期字符串 ```javascript series: [{ data: [{ x: new Date(2016, 01, 01), y: [51.98, 56.29, 51.59, 53.85] }, { x: new Date(2016, 02, 01), y: [53.66, 54.99, 51.35, 52.95] }, . . . { x: new Date(2016, 08, 01), y: [52.76, 57.35, 52.15, 57.03] }] }] ``` ### 自定义蜡烛的颜色 #### 蜡烛主体颜色 默认情况下,在烛台图表中,向上的蜡烛为绿色,向下的蜡烛为红色。您可以通过设置以下选项来更改这些颜色 ```javascript plotOptions: { candlestick: { colors: { upward: '#3C90EB', downward: '#DF7D46' } } } ``` 上面的颜色设置会产生下面的结果 <iframe src="http://example.itshubao.com/inexample/285.html" width="100%" height="380px" frameborder="0" scrolling="no"></iframe> #### 烛芯颜色 指示蜡烛高点和低点的灯芯使用与主体颜色相同的颜色。如果将此选项设置为 `FALSE`,灯芯将使用 `options.stroke.colors` 属性作为后备颜色。 ```javascript plotOptions: { candlestick: { wick: { useFillColor: true, } } } ``` 将选项保持 `useFillColor` 为 `TRUE` 将产生以下结果 <iframe src="http://example.itshubao.com/inexample/286.html" width="100%" height="380px" frameborder="0" scrolling="no"></iframe> ## 何时使用烛台图? - 用于财务情景和股票走势分析。 - 交易时,烛台图显示特定日期的四个价格点 - 开盘价、最高价、最低价和收盘价。 - 为了更容易预测股票价格 - 代表资产价格变动的大小。 - 显示变量之间的关系或信息的总体方向。 - 当您必须使用垂直轴显示数值时。 ## 条形图与烛台图表和图表 烛台图更擅长突出开盘价和收盘价之间的差异,并且可以非常轻松地显示 OHLC 信息。使用条形图,查看这些动态价格变化和异常情况更具挑战性。
上一篇:
箱形图(BoxPlot)
下一篇:
范围条形图(Range Bar Chart)