起步
安装
创建第一个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
dataLabels - Apexcharts中文手册 - 笔下光年
网站首页
dataLabels
[TOC] - ## dataLabels - ### enabled: Boolean 判断是否显示dataLabels - ### enabledOnSeries: Array of Numbers 允许仅显示多系列图表中特定系列的系列。例如,如果您有一个折线图和一个柱形图,您可以通过在此数组属性中指定它的索引来仅在折线图上显示 dataLabels。 - ### formatter: function(val, opts) 格式化程序函数允许您在显示示例之前修改值: ```javascript formatter: function(value, { seriesIndex, dataPointIndex, w }) { return w.config.series[seriesIndex].name + ": " + value } ``` 在上面的代码中,`seriesIndex` 在多系列图表中很有用,而 `dataPointIndex` 是该系列中数据点的索引。`w` 是一个包含所有全局变量和配置的对象,可以按照上述代码中提到的方式使用。 - ### textAnchor: String 文本相对于 dataLabel 绘图位置的对齐方式 可接受的值 - start - middle - end - ### distributed: Boolean 与 类似 `plotOptions.bar.distributed`,此选项使每个数据标签离散。因此,当您在 中提供 `datalabels.style.colors` 颜色数组时,颜色数组中的索引与所有系列的单个数据标签索引相关联。 - ### offsetX: Number 设置数据标签的左偏移量 - ### offsetY: Number 设置数据标签的顶部偏移量 - ### style - #### fontSize: String 标签的字体大小 - #### fontFamily: String 标签的字体 - #### fontWeight: String || Number 标签的字体粗细。可以是字符串(`'bold'`)或数字 (`400/500`) - #### colors: Array of String || Array of Functions 数据标签的前景色。接受字符串颜色数组 ( `['#333', '#999']` ) 或函数数组 ( `[function(opts) { return '#333' }]` )(数组中的每个索引对应于该系列)。 - ### background: - #### enabled: Boolean 应该在标签周围绘制一个背景矩形 - #### foreColor: Color 启用背景时标签的颜色。这将覆盖 `colors` 上面的 `style` 键。 - #### borderRadius: Number 背景矩形的边框半径。 - #### borderWidth: Number 背景矩形的边框宽度。 - #### borderColor: Color 背景矩形的边框颜色。 - #### opacity: Number 背景颜色的不透明度。 - #### dropShadow - ##### enabled: Boolean 为数据标签背景启用阴影 - ##### top: Number 设置阴影的顶部偏移 - ##### left: Number 设置阴影的左偏移 - ##### blur: Number 设置阴影的模糊距离 - ##### color: Color 设置阴影的颜色 - ##### opacity: Number 设置阴影的不透明度。 - ### dropShadow - #### enabled: Boolean 启用文本阴影 - #### top: Number 设置文本阴影的顶部偏移 - #### left: Number 设置文本阴影的左偏移量 - #### blur: Number 设置文本阴影的模糊距离 - #### color: Color 设置文字阴影的颜色 - #### opacity: Number 设置文字阴影的不透明度。 ```javascript dataLabels: { enabled: true, enabledOnSeries: undefined, formatter: function (val, opts) { return val }, textAnchor: 'middle', distributed: false, offsetX: 0, offsetY: 0, style: { fontSize: '14px', fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 'bold', colors: undefined }, background: { enabled: true, foreColor: '#fff', padding: 4, borderRadius: 2, borderWidth: 1, borderColor: '#fff', opacity: 0.9, dropShadow: { enabled: false, top: 1, left: 1, blur: 1, color: '#000', opacity: 0.45 } }, dropShadow: { enabled: false, top: 1, left: 1, blur: 1, color: '#000', opacity: 0.45 } } ```
上一篇:
colors
下一篇:
fill