highchart之柱状图

来源：互联网发布：gnu linux 编辑：程序博客网时间：2024/06/05 23:39

这两天项目有个简单的柱状图需求。主要需求就是展示app数量，用当航线将数据分类，分为合格。不合格，然后通过点击省对应的柱状图柱子展现出省下面的地市数据。地市到区县等等，

效果图

3-12区间为正常取值也就是导航线了。导航线代码

/* 插入导航线 */plotLines : [ {label : {text : "12",align : "left",style : {color : "#6CFF49",fontWeight: 'bold',},x : 10,y : -3,},value : 12,width : 2,dashStyle : "Solid",color : "#6CFF49"}, {label : {text : "3",align : "left",style : {color : "#E20B08",fontWeight: 'bold'},x : 10,y : -3,},value : 3,width : 2,dashStyle : "Solid",color : "#E20B08"} ]}

然后就是点击柱子区域出发进入该区域地名下层，highcharts柱子实体部分提供了click事件，但是柱子区域找了一下。确实没找到触发事件接口，但是当数据很小的时候。0.001的时候。柱子实体用肉眼无法看出来了，更不说鼠标移上去点击了。不过highcharts给整个图表提供了一个click事件，不管你是点击柱子还是柱子区域都会触发，我们可以利用这一点来实现点击柱子区域就触发点击柱子事件，highchart有个tooltip属性，当你鼠标移动柱子区域的时候会显示该柱子详细信息，而且支持自定义代码。我们自定义代码时候设置一个ID

tooltip : {headerFormat : '<span id="barAreaName" style="font-size:10px">{point.key}</span><table>',pointFormat : '<tr><td style="color:{series.color};padding:0">{series.name}: </td>'+ '<td style="padding:0"><b>{point.y} ‰</b></td></tr>',footerFormat : '</table>',shared : true,useHTML : true,valueDecimals:3},

这样子我们在点击整个图时候就能获取到当前柱子区域柱子的详细信息了，问题也就解决了。

个人觉得highchairt是一款很不错的图标插件，使用方便，使用面很广，对浏览器兼容性也非常好。而且免费。

官网http://www.highcharts.com/，好像官网主页能进demo和api页面进去看不到东西。

highchart中文网http://www.hcharts.cn/，半翻译

0 0