java highchart统计图_java+highchart实现分类下钻柱形图

可视化展示中, 向下钻取的功能很常见. 这是有必要掌握的技能之一.

首先看官方示例.

第一层

点击第一个柱子向下钻取

实现这种图形展示, 关键点和难点在于数据格式的准备上. 通过查看示例代码, 可以看出, 主要需要两个参数: series和drilldown:series.

经过测试发现, series可以支持两种格式: 1. json格式和数组格式.

为了叙述方便, 这里定义省,市,区/县表示3级. 本文以实现这样的3级下钻为例.

关键图形参数

series

series: [{

name: '浏览器品牌',

colorByPoint: true,

data: [{

name: 'Microsoft Internet Explorer',

y: 56.33,

drilldown: 'Microsoft Internet Explorer'

}, {..},..]

其中, data中的元素笔者将其称作点(point), 包含name-鼠标悬停显示的分类名称,y-数值, drilldown-寻找下钻后的数据的锚, drilldown:series中会有对应的id. (注: 最低一级一般不需要drilldown参数, 当然有不会影响显示, 这就为封装数据提供了小便利).

drilldown:series

drilldown: {

series: [{

name: 'Microsoft Internet Explorer',

id: 'Microsoft Internet Explorer',

data: [

[

'v11.0',

24.13

],

[..],...

}]

｝

所有的需要向下钻取的数据都在drilldown字段里. 即市和区的数据都在drilldown里配置.

这里的series格式和上文的series格式一样.

这里的data格式为数组样式. 经测试, 也可以用上文的json样式. 这又为封装数据提供了便利. 注意:省级和市级由于需要向下钻取, 所以data不能为数组格式(没有那么智能, 差评).

需求

省市区对应了若干小分区. 现需要分组