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,包括轴相关,刻度相关,刻度值相关,及网格和网线
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,544评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,430评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,764评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,193评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,216评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,182评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,063评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,917评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,329评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,543评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,722评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,425评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,019评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,671评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,825评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,729评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,614评论 2 353

推荐阅读更多精彩内容

  • 2015年就停止简书更新了!!专注于github, 有需要几千github star 的可以联系我!!! 最近老喜...
    github加星点进来阅读 3,869评论 3 11
  • 8. Setting Colors Since release v1.4.0, the ColorTemplate...
    ngugg阅读 705评论 0 0
  • This chapter covers the basic setup for using this librar...
    ngugg阅读 997评论 0 1
  • 一、highchart的组成 大致浏览一遍源代码,Highchart作为一个对象,会有大致以下几个构造函数。 每个...
    cuiy245阅读 2,885评论 1 5
  • 下面是挑选出的9个 JavaScript 图表库: Chart.js Chartist FlexChart Ech...
    zhangxuepeng阅读 4,942评论 0 5