要使用 Higcharts 最快学会的方法,就是拿着官网给我们的例子,加以分析和修改。
兼容 IE6+、完美支持移动端、图表类型丰富的 HTML5 交互图表 | Highcharts
需求: 绘制极地图并给极地图图表加上标示线,在柱状图中找出最值
分析:图表加上标示线在需要的轴上面用plotLines(标示线)属性来进行添加,极地图则是在chart(图表)属性里开启polar(极)属性然后进行绘制,找出最值需要在plotOptions属性里进行修改
解决:
源代码:
示例:
标示线总是垂直于它属于的轴。它可单独定义在x轴或y轴,也可以同时定义在x轴和y轴,而极地图里圆圈标示线属于y轴。
极地图图表绘制及添加标示线+柱状图找最值以上表为例进行总结:
极地图
1)在图表(chart)里开启polar(极)属性’
2)在y轴yAxis里输入plotLines
3) 接着输入想要的属性进行生成即可
柱形图找最值
1)首先要在plotOptions里配置柱状图的数据标签(dataLabels)将它开启
2)接着用格式化的方法formatter进行生成
标示线常见的属性有以下几种:
属性名描述默认值
color标示线的颜色null
dashStyle标示线的线条样式,默认是solid,即直线型,更多下面详细说明'solid'
events标示线的事件,详细事件下文详解null
id定义标示线,在Axis.removePlotLine中定义去除那条标示线null
value在坐标轴上显示的位置null
label标示线的文字标签,用来描述标示线null
width标示线的宽度null
zIndex层叠,标示线在图表中显示的层叠级别,值越大,显示越向前,默认标示线显示在数据线之后null
具体使用方法在源代码截图处有给出