JChart.NormalData Class
Constructor
JChart.NormalData
()
static
Example:
显示 两条[曲线|柱状]的图表数据
{
xAxis: {
categories: [ '02/24', '02/25', '02/26', '02/27', '02/28', '02/29', '03/01' ]
}
, yAxis: {
format: '{0}%'
, maxvalue: 100
}
, series:[{
name: '目标PV'
, data: [ 70, 49, 76, 30, 55, 26, 78 ]
}, {
name: '目标UV',
data: [ 48, 62, 50, 50, 30, 40, 35 ]
}]
, tooltip: {
enabled: true
, "headerFormat": "{0}"
, "pointFormat": "{0} %"
}
, displayAllLabel: true
, legend: {
enabled: false
}
, dataLabels: {
enabled: true
, format: '{0}%'
}
, vline: {
//enabled: false
}
, hline: {
//enabled: true
}
, colors: [
0x03ACEF
, 0x5DC979
, 0x09c100
, 0x0c76c4
, 0xff0619
, 0xFFBF00
, 0xff7100
, 0xff06b3
, 0x41e2e6
, 0xc3e2a4
, 0xffb2bc
, 0xdbb8fd
]
, chart: {
bgColor: 0xffffff
, bgAlpha: 1
//, graphicHeight: 220
}
, hoverBg: {
enabled: true
, style: {
borderColor: 0xB4B4B4
, borderWidth: 2
, bgColor: 0xF0F0F0
}
}
}
Item Index
Properties
- chart
- chart.bgAlpha
- chart.bgColor
- chart.graphicHeight
- colors
- dataLabels
- dataLabels.enabled
- dataLabels.format
- displayAllLabel
- hline
- hline.enabled
- hoverBg
- hoverBg.enabled
- hoverBg.style
- isItemPercent
- isPercent
- itemBg
- itemBg.enabled
- itemBg.style
- maxItem
- maxItem.style
- series
- toggleBg
- toggleBg.enabled
- toggleBg.style
- tooltip
- tooltip.afterSeries
- tooltip.enabled
- tooltip.header
- tooltip.headerFormat
- tooltip.pointFormat
- tooltip.series
- vline
- vline.enabled
- xAxis
- xAxis.categories
- xAxis.enabled
- xAxis.format
- xAxis.wordwrap
- yAxis
- yAxis.enabled
- yAxis.format
- yAxis.maxvalue
- yAxis.rate
Properties
chart.bgAlpha
Number 0.01 ~ 1
图表的背景色透明度
Default: 0.13
chart.bgColor
Hex color
图表的背景颜色
Default: 0xcccccc
chart.graphicHeight
Number
图表数据显示块的高度
有时需要把多个数据图表显示一样的视觉高度, 但是其他图表的 水平label高度不一样, 就会导致视觉上的不同
这个属性就是为了解决这个问题, 把图表数据显示块设置为统一的高度
Default: 0, 0 = auto
colors
Array of hex colors
数据项的显示颜色
Default: : [0x03ACEF, 0x5DC979, 0x09c100, 0x0c76c4 , 0xff0619, 0xFFBF00, 0xff7100, 0xff06b3, 0x41e2e6, 0xc3e2a4, 0xffb2bc, 0xdbb8fd]
hoverBg.style
Object
数据项背景色的样式定义
Default: { borderColor: 0xB4B4B4, bgColor: 0xF0F0F0, borderWidth: 0 }
itemBg.style
Object
数据项背景色的样式定义
Default: { borderColor: 0xB4B4B4, bgColor: 0xF0F0F0, borderWidth: 0 }
series
Array of Object
展现的数据
series 每条数据里的 data 属性, 长度应该与 xAxis.categories 的长度相等
显示数值如果为百分比的话, 需要设置 yAxis.maxvalue = 100
Default: null
Example:
series:[{
name: '目标PV'
, data: [ 70, 49, 76, 30, 55, 26, 78 ]
}, {
name: '目标UV',
data: [ 48, 62, 50, 50, 30, 40, 35 ]
}]
toggleBg.style
Object
数据项背景色的样式定义( pending )
Default: { borderColor: 0xEDF1F3, bgColor: 0xEDF1F3, borderWidth: 0, thickness: 1 }
tooltip.afterSeries
Array of Object
tips 的扩展字段( 在行底显示扩展的字段 )
series 每条数据里的 data 属性, 长度应该与 xAxis.categories 的长度相等
Default: null
Example:
"afterSerial": [
{
"name": "区分度"
, "data": [
1.04, 1.05, 1.06, 1.07, 1.08, 1.09
, 2.01, 2.02, 2.03, 2.04, 2.05, 2.06
, 3.09, 3.08, 3.07, 3.06, 3.05, 3.04
, 4.11
]
}
]
tooltip.header
Array of String
tips 主标题的显示数据
如果不显式声明 tooltip.header, 默认数据为 xAxis.categories
Default: null
Example:
header: [ '2014/02/24', '2014/02/25', '2014/02/26', '2014/02/27', '2014/02/28', '2014/02/29', '2014/03/01' ]
tooltip.series
Array of Object
tips 的扩展字段( 在行首显示扩展的字段 )
series 每条数据里的 data 属性, 长度应该与 xAxis.categories 的长度相等
Default: null
Example:
"serial": [
{
"name": "总体"
, "data": [
1000, 2000, 3000, 4000, 5000, 6000
, 1000, 2000, 3000, 4000, 5000, 6000
, 1000, 2000, 3000, 4000, 5000, 6000
, 7000
]
}
xAxis.categories
Array of String
横向坐标的显示数据
这些数据默认也用于显示 tips 的主标题, 如果想重定义 tips 的主标题, 请设置 tooltip.header 属性
Default: null
Example:
categories: [ '02/24', '02/25', '02/26', '02/27', '02/28', '02/29', '03/01' ]
yAxis.rate
Array of Number
纵向坐标的切分粒度
Default: auto
Example:
rate: [ 1, .8, .6, .4, .2, .0 ]