前端 原创 开发&源码 ·

HignCharts:实现刻度在顶部的图表

之前项目中就已经引入了HignCharts进行图表绘制,也写过一篇HignCharts:线形图饼图绘制及时间等定制...

刻度在顶部的图表.itlao5.com

现在的需求类似上图,可以发现,其实就是一个刻度在顶部的柱形图,然而,在HignCharts演示中能找到的类似图表如下图:

chart.itlao5.com

所幸,参考HignChartsapi,发现很多内容都是可以修改的,通过一系列的定制,终于实现了需要的效果。

主要是对yAxis的处理(这样type是‘bar’,对x,y轴位置进行了更换,横向为y轴,所以修改yAxis):包含opposite: true将坐标轴显示在顶部,设置minorTick(次刻度线)而不是tick(刻度线),从而让刻度线显示在内部,修改offset以及lables的y属性,调整数字显示位置等...

其他都是对属性的隐藏,包含标题,x轴lable,导出按钮,提示文字,版权信息等...

具体js如下:

head中导入:

html代码:

ps: 之所以使用HignCharts并花费时间做这样的定制化,而不是直接通过js和css来实现这样一个自定义控件,有两个原因:1. 之前项目本就引入了HignCharts; 2. 本人主要是做Android开发,接触.net/js/css这些东西时间不长,本着能用现成的坚决不造轮子挖坑的目的...

简书:ThinkinLiu 博客: IT老五


IT老五(it-lao5):关注公众号,一起源创,一起学习!

参与评论