API Docs for: 0.2
Show:

JChart.NormalData Class

JChart 图表数据( 曲线图、柱状图 )

JChart Project Site | API docs

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
       }                                        
   }
}

Properties

chart

Object

图表背景的设置数据

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]

dataLabels

Object

数据点 label 的设置数据

dataLabels.enabled

Boolean

每个数据点是否显示数值文本

Default: false

Example:

enabled: false

dataLabels.format

String

格式化显示数值文本

Default: '{0}'

Example:

format: '{0}%'

displayAllLabel

Boolean

是否显示所有横向 label
如果非真, 而且长度大于4, 将按横向坐标的长度切分为4个显示坐标

Default: true

hline

Object

横向背景线的设置数据

hline.enabled

Boolean

是否显示横向背景线

Default: true

Example:

enabled: true

hoverBg

Object

数据项的鼠标划过的背景设置
目前这个属性仅对 柱状图 生效

hoverBg.enabled

Boolean

数据项鼠标划过是否显示背景色

Default: false

Example:

enabled: false

hoverBg.style

Object

数据项背景色的样式定义

Default: { borderColor: 0xB4B4B4, bgColor: 0xF0F0F0, borderWidth: 0 }

isItemPercent

Boolean

图表数值是否按 series 数据点 的总数值划分百分比

Default: false

Example:

isItemPercent: false

isPercent

Boolean

图表数值是否按总数值=100划分百分比

Default: false

Example:

isPercent: false

itemBg

Object

数据项的背景设置
目前这个属性仅对 柱状图 生效

itemBg.enabled

Boolean

数据项是否显示背景色

Default: false

Example:

enabled: false

itemBg.style

Object

数据项背景色的样式定义

Default: { borderColor: 0xB4B4B4, bgColor: 0xF0F0F0, borderWidth: 0 }

maxItem

Object

最大数据的显示设置
目前这个属性仅对 柱状图 生效

maxItem.style

Object

Default: null

Example:

 style: { color: 0x5DC979, size: 18 }

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

Object

数据项的背景区分设置
目前这个属性仅对 曲线图 生效

toggleBg.enabled

Boolean

数据项是否每隔一个数据显示不同的背景色

Default: false

Example:

enabled: false

toggleBg.style

Object

数据项背景色的样式定义( pending )

Default: { borderColor: 0xEDF1F3, bgColor: 0xEDF1F3, borderWidth: 0, thickness: 1 }

tooltip

Object

tips 设置数据
tips 的主标题默认为 xAxis.categories 对应索引的数据
如果想重定义主标题, 请设置 tooltip.header 属性

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.enabled

Boolean

是否显示 tips

Default: true

Example:

enabled: true

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.headerFormat

String

tips 主标题的显示格式

Default: '{0}'

Example:

headerFormat: '{0} right title'

tooltip.pointFormat

String

tips 坐数值的显示格式

Default: '{0}'

Example:

pointFormat: '{0}%'

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
       ]
   }

vline

Object

纵向背景线的设置数据

vline.enabled

Boolean

是否显示纵向背景线

Default: true

Example:

enabled: true

xAxis

Object

横向坐标设置数据

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' ]

xAxis.enabled

Boolean

是否显示横向坐标( pending )

Default: true

Example:

enabled: false

xAxis.format

String

横向坐标显示数据格式化显示

Default: '{0}'

Example:

format: '{0}%'

xAxis.wordwrap

Boolean

横向坐标显示数据是否自动换行

Default: true

Example:

wordwrap: true

yAxis

Object

纵向坐标设置数据

yAxis.enabled

Boolean

是否显示纵向坐标

Default: true

Example:

enabled: true

yAxis.format

String

纵向坐标显示数据格式化显示

Default: '{0}'

Example:

format: '{0}%'

yAxis.maxvalue

Number

自定义纵向坐标的最大值
0 = auto
显示百分比的时候, 应该设置为 100

Default: 0

Example:

maxvalue: 0

yAxis.rate

Array of Number

纵向坐标的切分粒度

Default: auto

Example:

rate: [ 1, .8, .6, .4, .2, .0 ]