起步
安装
创建第一个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
Series [处理数据] - Apexcharts中文手册 - 笔下光年
网站首页
Series [处理数据]
Series 是一组数据。您可以有一个或多个数据 series。Series对象可以采用以下格式: ### 1). 单一值 ```javascript series:[{ data: [23, 34, 12, 54, 32, ... , 43] }] ``` 其中,数据数组中的所有值都表示 y 轴值。 <iframe src="http://example.itshubao.com/inexample/248.html" width="100%" height="420px" frameborder="0" scrolling="no"></iframe> 默认情况下,此格式的数据被视为类别图表,类别必须在 xaxis 中提供。像这样的 categories : ```javascript xaxis:{ categories: ["Jan", "Feb", "Mar", ... , "Dec"] } ``` > 对于柱状图/条形图等需要显示数据类别之间比较的类别图, “单一值” 格式更容易。 ### 2). 成对值 #### 2.1)二维数组中的成对数值 ```javascript series: [{ data: [[1, 34], [3, 54], [5, 23] , ... , [15, 43]] }], xaxis: { type: 'numeric' } ``` 其中,第一个索引是 x 轴值,第二个索引是 y 轴值。确保如上所示将 xaxis 类型设置为 numeric。 <iframe src="http://example.itshubao.com/inexample/305.html" width="100%" height="420px" frameborder="0" scrolling="no"></iframe> #### 2.2)XY属性中的成对数值 创建数字成对序列的另一种方法是将 XY 值作为对象传递,如下所示。在这里,也不要忘记设置 xaxis。`type: 'numeric'`,因为X值包含数字。 ```javascript series: [{ data: [{ x: 20, y: 54 }, { x: 30, y: 66 }], }], xaxis: { type: 'numeric' } ``` #### 2.3)类别配对值 而不是提供单独的 xaxis。类别数组中,还可以提供类别( x 值)和 y 值。请注意,x 属性可以接受字符串值,这与上一个示例中的数字不同。 ```javascript series: [{ data: [{ x: 'Apple', y: 54 }, { x: 'Orange', y: 66 }], }], xaxis: { type: 'category' } ``` 某些图表类型(如Treemap)只接受这种格式。这种格式也有助于添加附加信息以及可能在其他地方使用的数据点(例如,在工具提示、数据标签等中)。 ### 3). 时间线系列 要绘制时间线系列,您需要以以下方式提供时间戳值。 #### 3.1)时间戳 ```javascript series: [{ data: [[1324508400000, 34], [1324594800000, 54] , ... , [1326236400000, 43]] }] ``` <iframe src="http://example.itshubao.com/inexample/306.html" width="100%" height="420px" frameborder="0" scrolling="no"></iframe> 或者可以通过以下方式提供日期字符串。 #### 3.2)日期字符串 ```javascript series: [{ data: [{ x: '05/06/2014', y: 54 }, { x: '05/08/2014', y: 17 } , ... , { x: '05/28/2014', y: 26 }] }] ``` 当通过 JavaScript 的 `Date.parse()` 函数解析时,您提供的 `DateTime` 字符串应该返回 `true`。 <iframe src="http://example.itshubao.com/inexample/307.html" width="100%" height="420px" frameborder="0" scrolling="no"></iframe> ### 4). Pie/Donuts/RadialBars 的数据 该 series 需要一个用于 Pie/Donuts/RadialBars 的数组。 Series 值的名称将在标签属性中提供。 ```javascript series: [23, 11, 54, 72, 12], labels: ["Apple", "Mango", "Banana", "Papaya", "Orange"] ```
上一篇:
图表要点
下一篇:
响应式