Highcharts treemap 应用

Highcharts 中的treemap 应用实例

HTML

<div id="container" class="container" style="height:117px;margin:0;padding:0;width:99.9%;background-color: #fff;"></div>

function loadCharts(data) {
							var datax = data;
							Highcharts.chart('container', {
								chart: {
									marginLeft: 0,
									spacingBottom: 0,
									spacingTop: 0,
									spacingLeft: 0,
									spacingRight: 0
								},
								tooltip: {
									pointFormat: '{point.name}'
								},
								title: {
									text: null
								},
								exporting: {
									allowHTML: true,
									enabled: false

								},
								credits: {
									enabled: false
								},
								plotOptions: {
									series: {
										events: {
											click: function(event) {
												window.open(event.point.url);
											}
										}
									}
								},
								series: [{
									type: "treemap",
									layoutAlgorithm: 'stripes',
									alternateStartingDirection: true,
									states: {
										hover: {
											borderColor: '#fff'
										}
									},
									 
									borderColor: '#fff',
									borderWidth: 8,
									borderRadius: 0,
									margin: [0, 0, 0, 0],
									spacing: [0, 0, 0, 0],
									levels: [{
										level: 1,
										dataLabels: {
											enabled: true,
											align: 'left',
											useHTML: true,
											style: {
												fontSize: '12px'
											},
											formatter: function() {
												if(this.point.icon == null || this.point.icon == ""){
                                                                                                         return '<div class="dashboard-stats" style="cursor: pointer;"><div><img style="width:48px;height:44px;float:left;margin-left: 15px;" src="${ctx}/Content/images/jdbicon/work/gzoa.png" width="30px"/></div><div id="workCenter" style="color:#fff;"><span style="padding-left: 10px;font-size:18px;">' + this.point.workCount + '</span> 条</br><span  style="padding-left: 10px;padding-top:10px;">' + this.point.name + '</span></div></div>'
                                                                                                          //没有图标时显示默认图标												

                                                                                                }
												else{
													return '<div class="dashboard-stats" style="    min-width: 55px;cursor: pointer;"><div><img style="width:48px;height:44px;float:left;margin-left: 15px;" src=${ctx}/Content/images/jdbicon/work/' + this.point.icon + ' width="30px"/></div><div id="workCenter" style="color:#fff;"><span style="padding-left: 10px;font-size:18px;">' + this.point.workCount + '</span> 条</br><span  style="padding-left: 10px;padding-top:10px;">' + this.point.name + '</span></div></div>'

												}
											}
										}
									}],

									data: datax
								}]
							})
						}

其中data是JSON数据