起步
安装
创建第一个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
日期时间 - Apexcharts中文手册 - 笔下光年
网站首页
日期时间
#### a). xaxis.labels.datetimeFormatter 这是时间序列中 x 轴标签生成的默认设置。 ```javascript xaxis: { labels: { datetimeFormatter: { year: 'yyyy', month: 'MMM \'yy', day: 'dd MMM', hour: 'HH:mm' } } } ``` 基于 minX(最左边的日期时间)和 maxX(最右边的日期时间)之间的差异,生成 x 轴标签。 如果差异 > 5 年 – 标签按 `yyyy` 格式生成。 ![](/uploads/images/20221227/fc389de67da09ac02a4b965e18664da5.png) 如果差异 > 2年且 < 5年,则标签为 `yyyy` 和 `MMM'yy` 的组合 ![](/uploads/images/20221227/07cbc6c5897d93ccdca580d1fc3d5a06.png) 依此类推,直到时间到了。 #### b). xaxis.labels.format 日期时间值的 X 值格式化也可以通过以下方式格式化: `xaxis.labels.format = 'dd/MM'` 这将修复标签格式化程序,并且不会考虑时间差异是否以年/月/日/小时为单位 ```javascript xaxis: { labels: { format: 'dd/MM', } } ``` #### c). xaxis.labels.formatter 覆盖所有内容并为 xaxis 值应用自定义函数。 ```javascript xaxis: { labels: { formatter: function (value, timestamp) { return new Date(timestamp) // The formatter function overrides format property }, } } ``` 该表显示了可用于格式说明符的有效选项。 | 格式说明符 | 描述 | |------------------|-----------------------------------------------------------| | "dddd" | 星期几的全名。 | | "ddd" | 星期几的缩写名称。 | | "dd" | 一个月中的第几天,从 01 到 31。 | | "d" | 一个月中的第几天,从 1 到 31。 | | "MMMM" | 月份的全名。 | | "MMM" | 月份的缩写名称。 | | "MM" | 月份,从 01 到 12。 | | "M" | 月份,从 1 到 12。 | | "yyyy" | 以四位数表示的年份。 | | "yy" | 年份,从 00 到 99。 | | "y" | 年份,从 0 到 99. | | "hh" | 小时,使用从 01 到 12 的 12 小时制。 | | "h" | 小时,使用从 1 到 12 的 12 小时制。 | | "HH" | 小时,使用从 00 到 23 的 24 小时制。 | | "H" | 小时,使用从 0 到 23 的 24 小时制。 | | "mm" | 分钟,从 00 到 59。 | | "m" | 分钟,从 0 到 59。 | | "ss" | 秒,从 00 到 59。 | | "s" | 秒,从 0 到 59。 | | "fff" | 三位数的毫秒值。 | | "ff" | 百分之一和十分之一毫秒的值。 | | "f" | 百分之一毫秒的值。 | | "tt" | am/pm 指示符。(小写) | | "t" | am/pm 指示符的第一个字符。(小写) | | "TT" | AM/PM 指示符。(大写) | | "T" | AM/PM 指示符的第一个字符。(大写) |
上一篇:
格式化轴标签
下一篇:
本地化