highCharts的概念理解

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、className
• marker：数据点标记(即折线图、线条上面的数据点)。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，包括轴相关，刻度相关，刻度值相关，及网格和网线