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 ]