1、
chart
:图表
配置
:type、animation、colorCount、reflow、renderTo等图表的样式
:borderColor等,内边距spacing,外边距Margin绘图区的样式
:如plotBackgroundColor等、和inverted反转坐标轴
钩子
:加载、渲染、添加、点击、选择、重绘、打印
2、
credits
:版权(默认在图表的右下角)
enabled
text和href
position
style
3、
data
: 数据来源:然后解析数据后生成x、y。除了这里设置数据源。我们一般在xAxis和series配置
数据源
:csv:xxx 或 table:tableId 或columns:[[],[],[],[]]- 、、、
4、
labels
:标签。absolute布局,可以覆盖在图表任何地方
item
:[ {html:xxx,style:{} }, ]style
:{} //通用样式
5、
legend
:图例
图例的布局
:align、verticalAlign、x、y及floating导航条的样式
:如图例项太多,溢出则会显示导航条图例的样式
:enabled、borderColor、borderRadius,padding、margin等图例项间的样式
:布局:layout: "horizontal" 或 "vertical" ;图例间距离:itemDistance、或itemMarginTop、itemMarginBottom图例项样式
:itemHoverStyle、itemHiddenStyle、itemStyle图例项的符号
(文字前面这个图标):symbolHeight、symbolWidth、symbolPadding、symbolRadius
6、
noData
:没有数据的状态配置
7、
loading
:在加载的时候的状态配置
showDuration
手动调用chart.showLoading()hideDuration
手动调用chart.hideLoading()style
8、
plotOptions
:通用、特定图表类型的数据列配置
plotOptions.series
:通用数据列配置plotOptions.bar
:针对bar的数据列配置- 或者在series中直接配置。优先级最高(因为配置项都差不多,地下直接介绍series的配置)
9、
series
:数据列配置
区别
:plotOptions.series和series的配置有什么区别
- plotOptions.series就是对数据列的配置。不涉及到具体的数据
- series:[{},{}]。
会涉及到具体的数据,是数组类型
。多了data及type
type
:图表类型data
:数据[],数组项,也可以是对象(即,还可以针对这个数据,进行数据列的一些配置)
- 以下为plotOptions.series的通用配置
配置
:allowPointSelect、cursor、animation、animationLimit、findNearestPointBy样式
:color、dashStyle、classNamemarker
:数据点标记(即折线图、线条上面的数据点)。enable、fillColor、lineColor、lineWidth、symbor可以换图标,包括hover,select还可以修改其状态dataLabels
:marker旁边显示数值,align、verticalAlign、rotation、x、y
及enable、defer、format、inside(最柱形图有用)point.events
:数据点相关的事件,如click,mouseMoveIn等等toolTip
:提示框
10、xAxis、yAxis:x轴和y轴的配置
categories
:分类轴线相关
:line-color、line-width、自身轴反转reversed
刻度相关
:max、ceiling、min、floor、endOnTick。及tickColor、tickPosition等等刻度值相关labels
:enable、align、x、y、step网线和网格相关
:gridLineColor、gridLineWidth等,及网格alternateGridColor其它
:次刻度、次网线
二、总结
图表
- 非绘图区
title、subTitle
:主副标题credits
:版权legend
:图例exporting
:导出labels
:标签,absolute布局,用于显示一些数据,可以显示在任何位置
- 绘图区
状态分类
:noData、loading这些状态下的绘图区配置.其它主要是坐标轴和数据列的配置series或plotOptions.series
:包括数据点标记,数据标签,toolTip及一些事件x、y轴
:xAxis和yAxis,包括轴相关,刻度相关,刻度值相关,及网格和网线