我实施了一个高地图,该地图从州到区仅向下钻取两个级别。但我需要深入了解各州,各地区以及其他地区。使用高图有可能进行3级深入分析吗??
<ORDER_HEADER>
<HEADER_ROW>
<ORIG_SYS_DOCUMENT_REF>001529872197</ORIG_SYS_DOCUMENT_REF>
<SALESREP>
<SALESREP_ROW/>
</SALESREP>
</SOLD_TO_CONTACT>
<SHIP_TO_CONTACT> --> This SHIP TO comes under ORDER HEADER
<SHIP_TO_CONTACT_ROW>
<PHONE_NUMBER>6042333125201</PHONE_NUMBER>
<EMAIL_ADDRESS>abc@gmail.com</EMAIL_ADDRESS>
</SHIP_TO_CONTACT_ROW>
</SHIP_TO_CONTACT>
<ORDER_LINES>
<ORDER_LINES_ROW>
<ORIG_SYS_LINE_REF>001521970</ORIG_SYS_LINE_REF>
<ITEM_NUMBER>0158ABCSD012836</ITEM_NUMBER>
<ORDERED_QUANTITY>2</ORDERED_QUANTITY>
<SHIP_TO_CONTACT> --> This SHIP TO comes under ORDER LINES which again comes under ORDER HEADER
<SHIP_TO_CONTACT_ROW/>
</SHIP_TO_CONTACT>
<INVOICE_TO_CONTACT>
<INVOICE_TO_CONTACT_ROW/>
</INVOICE_TO_CONTACT>
<DELIVER_TO_CONTACT>
<DELIVER_TO_CONTACT_ROW/>
</DELIVER_TO_CONTACT>
</ORDER_LINES_ROW>
</ORDER_LINES>
</HEADER_ROW>
</ORDER_HEADER>
/*
TODO:
- Check data labels after drilling. Label rank? New positions?
*/
var data = Highcharts.geojson(Highcharts.maps['countries/us/us-all']),
separators = Highcharts.geojson(Highcharts.maps['countries/us/us-all'], 'mapline'),
// Some responsiveness
small = $('#container').width() < 400;
// Set drilldown pointers
$.each(data, function (i) {
this.drilldown = this.properties['hc-key'];
this.value = i; // Non-random bogus data
//alert('drilldown: '+this.drilldown + ''+this.value);
});
// Instantiate the map
Highcharts.mapChart('container', {
chart: {
events: {
drilldown: function (e) {
if (!e.seriesOptions) {
var chart = this,
mapKey = 'countries/us/' + e.point.drilldown + '-all',
// Handle error, the timeout is cleared on success
fail = setTimeout(function () {
if (!Highcharts.maps[mapKey]) {
chart.showLoading('<i class="icon-frown"></i> Failed loading ' + e.point.name);
fail = setTimeout(function () {
chart.hideLoading();
}, 1000);
}
}, 3000);
alert('test: '+mapKey);
// Show the spinner
chart.showLoading('<i class="icon-spinner icon-spin icon-3x"></i>'); // Font Awesome spinner
// Load the drilldown map
$.getScript('https://code.highcharts.com/mapdata/' + mapKey + '.js', function () {
data = Highcharts.geojson(Highcharts.maps[mapKey]);
// Set a non-random bogus value
$.each(data, function (i) {
this.value = i;
});
// Hide loading and add series
chart.hideLoading();
clearTimeout(fail);
chart.addSeriesAsDrilldown(e.point, {
name: e.point.name,
data: data,
dataLabels: {
enabled: true,
format: '{point.name}'
}
});
});
}
alert('test: '+e.point.drilldown);
this.setTitle(null, { text: e.point.name });
},
drillup: function () {
this.setTitle(null, { text: '' });
}
}
},
title: {
text: 'Highcharts Map Drilldown'
},
subtitle: {
text: '',
floating: true,
align: 'right',
y: 50,
style: {
fontSize: '16px'
}
},
legend: small ? {} : {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
colorAxis: {
min: 0,
minColor: '#E6E7E8',
maxColor: '#005645'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
plotOptions: {
map: {
states: {
hover: {
color: '#EEDD66'
}
}
}
},
series: [{
data: data,
name: 'USA',
dataLabels: {
enabled: true,
format: '{point.properties.postal-code}'
}
}, {
type: 'mapline',
data: separators,
color: 'silver',
enableMouseTracking: false,
animation: {
duration: 500
}
}],
drilldown: {
activeDataLabelStyle: {
color: '#FFFFFF',
textDecoration: 'none',
textOutline: '1px #000000'
},
drillUpButton: {
relativeTo: 'spacingBox',
position: {
x: 0,
y: 60
}
}
}
});
如果您有任何解决方案,请帮助我。