HighCharts 极地图图表绘制及添加标示线+柱状图找最值

要使用 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

具体使用方法在源代码截图处有给出

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容