我有 TreeMap ,其中包含下钻。我希望自定义按钮来钻取树,并在Highchart中找到一个事件(http://api.highcharts.com/highcharts#Chart.drillUp)。
我尝试的示例代码 - http://jsfiddle.net/vgnshs/t63xwxte/
我在图表下面放了一个“后退”按钮。当我点击它时,在chrome的控制台窗口中我得到以下错误
“Uncaught TypeError:无法读取undefinedm.drillUp @ drilldown.js的属性'length':7(匿名函数)@(index):990f.event.dispatch @jquery.min.js:3f.event.add。 h.handle.i @jquery.min.js:3“
如果我犯了任何错误,或者如果还有其他方法可以在TreeMap中处理演练,请帮助我吗?
感谢。
$(function () {
var data = {
"Americas": {
"Canada": {
"Noncommunicable diseases": "318.0",
"Injuries": "31.3",
"Communicable & other Group I": "22.6"
},
"Bolivia (Plurinational State of)": {
"Communicable & other Group I": "226.2",
"Noncommunicable diseases": "635.3",
"Injuries": "100.0"
},
"Haiti": {
"Communicable & other Group I": "405.4",
"Noncommunicable diseases": "724.6",
"Injuries": "89.3"
},
"Belize": {
"Noncommunicable diseases": "470.7",
"Injuries": "82.0",
"Communicable & other Group I": "104.6"
},
"Suriname": {
"Injuries": "70.5",
"Communicable & other Group I": "83.7",
"Noncommunicable diseases": "374.8"
},
"Argentina": {
"Communicable & other Group I": "68.7",
"Injuries": "50.7",
"Noncommunicable diseases": "467.3"
},
"Mexico": {
"Injuries": "63.2",
"Communicable & other Group I": "57.0",
"Noncommunicable diseases": "468.3"
},
"Jamaica": {
"Injuries": "51.5",
"Communicable & other Group I": "97.0",
"Noncommunicable diseases": "519.1"
},
"Peru": {
"Noncommunicable diseases": "363.5",
"Injuries": "47.9",
"Communicable & other Group I": "121.3"
},
"Brazil": {
"Injuries": "80.2",
"Communicable & other Group I": "92.8",
"Noncommunicable diseases": "513.8"
},
"Venezuela (Bolivarian Republic of)": {
"Communicable & other Group I": "58.2",
"Injuries": "103.2",
"Noncommunicable diseases": "410.6"
},
"Paraguay": {
"Noncommunicable diseases": "485.5",
"Communicable & other Group I": "77.3",
"Injuries": "67.6"
},
"Chile": {
"Noncommunicable diseases": "366.5",
"Communicable & other Group I": "36.3",
"Injuries": "41.2"
},
"Trinidad and Tobago": {
"Noncommunicable diseases": "705.3",
"Communicable & other Group I": "80.4",
"Injuries": "98.4"
},
"Colombia": {
"Noncommunicable diseases": "377.3",
"Communicable & other Group I": "55.0",
"Injuries": "72.6"
},
"Cuba": {
"Injuries": "45.3",
"Noncommunicable diseases": "421.8",
"Communicable & other Group I": "33.2"
},
"El Salvador": {
"Noncommunicable diseases": "474.9",
"Injuries": "157.7",
"Communicable & other Group I": "96.2"
},
"Honduras": {
"Injuries": "80.8",
"Communicable & other Group I": "117.5",
"Noncommunicable diseases": "441.5"
},
"Ecuador": {
"Noncommunicable diseases": "409.7",
"Injuries": "83.7",
"Communicable & other Group I": "97.3"
},
"Costa Rica": {
"Communicable & other Group I": "30.5",
"Noncommunicable diseases": "391.8",
"Injuries": "46.5"
},
"Dominican Republic": {
"Noncommunicable diseases": "396.0",
"Injuries": "66.4",
"Communicable & other Group I": "76.8"
},
"Nicaragua": {
"Communicable & other Group I": "75.2",
"Injuries": "64.4",
"Noncommunicable diseases": "546.6"
},
"Barbados": {
"Noncommunicable diseases": "404.5",
"Injuries": "28.0",
"Communicable & other Group I": "60.8"
},
"Uruguay": {
"Noncommunicable diseases": "446.0",
"Injuries": "53.8",
"Communicable & other Group I": "46.2"
},
"Panama": {
"Communicable & other Group I": "86.1",
"Injuries": "67.4",
"Noncommunicable diseases": "372.9"
},
"Bahamas": {
"Noncommunicable diseases": "465.2",
"Injuries": "45.7",
"Communicable & other Group I": "122.0"
},
"Guyana": {
"Communicable & other Group I": "177.2",
"Noncommunicable diseases": "1024.2",
"Injuries": "150.0"
},
"United States of America": {
"Noncommunicable diseases": "412.8",
"Injuries": "44.2",
"Communicable & other Group I": "31.3"
},
"Guatemala": {
"Communicable & other Group I": "212.7",
"Noncommunicable diseases": "409.4",
"Injuries": "111.0"
}
},
"Eastern Mediterranean": {
"Egypt": {
"Communicable & other Group I": "74.3",
"Noncommunicable diseases": "781.7",
"Injuries": "33.5"
},
"South Sudan": {
"Injuries": "143.4",
"Communicable & other Group I": "831.3",
"Noncommunicable diseases": "623.4"
},
"Sudan": {
"Injuries": "133.6",
"Noncommunicable diseases": "551.0",
"Communicable & other Group I": "495.0"
},
"Libya": {
"Injuries": "62.8",
"Noncommunicable diseases": "550.0",
"Communicable & other Group I": "52.6"
},
"Jordan": {
"Noncommunicable diseases": "640.3",
"Injuries": "53.5",
"Communicable & other Group I": "52.5"
},
"Pakistan": {
"Communicable & other Group I": "296.0",
"Noncommunicable diseases": "669.3",
"Injuries": "98.7"
},
"Djibouti": {
"Noncommunicable diseases": "631.1",
"Communicable & other Group I": "626.0",
"Injuries": "106.0"
},
"Syrian Arab Republic": {
"Communicable & other Group I": "41.0",
"Injuries": "308.0",
"Noncommunicable diseases": "572.7"
},
"Morocco": {
"Noncommunicable diseases": "707.7",
"Communicable & other Group I": "131.5",
"Injuries": "47.0"
},
"Yemen": {
"Communicable & other Group I": "515.0",
"Noncommunicable diseases": "626.9",
"Injuries": "84.3"
},
"Bahrain": {
"Injuries": "33.5",
"Noncommunicable diseases": "505.7",
"Communicable & other Group I": "48.5"
},
"United Arab Emirates": {
"Noncommunicable diseases": "546.8",
"Injuries": "31.5",
"Communicable & other Group I": "35.6"
},
"Lebanon": {
"Noncommunicable diseases": "384.6",
"Injuries": "40.6",
"Communicable & other Group I": "30.5"
},
"Saudi Arabia": {
"Noncommunicable diseases": "549.4",
"Injuries": "41.1",
"Communicable & other Group I": "71.3"
},
"Iran (Islamic Republic of)": {
"Injuries": "74.9",
"Communicable & other Group I": "56.2",
"Noncommunicable diseases": "569.3"
},
"Iraq": {
"Communicable & other Group I": "87.0",
"Noncommunicable diseases": "715.5",
"Injuries": "128.5"
},
"Qatar": {
"Communicable & other Group I": "28.3",
"Injuries": "41.0",
"Noncommunicable diseases": "407.0"
},
"Afghanistan": {
"Communicable & other Group I": "362.7",
"Injuries": "169.2",
"Noncommunicable diseases": "846.3"
},
"Somalia": {
"Noncommunicable diseases": "550.7",
"Communicable & other Group I": "927.2",
"Injuries": "188.5"
},
"Kuwait": {
"Communicable & other Group I": "82.5",
"Injuries": "25.4",
"Noncommunicable diseases": "406.3"
},
"Oman": {
"Injuries": "52.8",
"Noncommunicable diseases": "478.2",
"Communicable & other Group I": "84.2"
},
"Tunisia": {
"Noncommunicable diseases": "509.3",
"Communicable & other Group I": "65.0",
"Injuries": "39.1"
}
},
"Western Pacific": {
"Mongolia": {
"Injuries": "69.4",
"Noncommunicable diseases": "966.5",
"Communicable & other Group I": "82.8"
},
"Cambodia": {
"Injuries": "62.2",
"Communicable & other Group I": "227.5",
"Noncommunicable diseases": "394.0"
},
"Japan": {
"Injuries": "40.5",
"Noncommunicable diseases": "244.2",
"Communicable & other Group I": "33.9"
},
"Brunei Darussalam": {
"Injuries": "44.6",
"Noncommunicable diseases": "475.3",
"Communicable & other Group I": "56.1"
},
"Solomon Islands": {
"Communicable & other Group I": "230.6",
"Injuries": "75.1",
"Noncommunicable diseases": "709.7"
},
"Viet Nam": {
"Communicable & other Group I": "96.0",
"Injuries": "59.0",
"Noncommunicable diseases": "435.4"
},
"Lao People's Democratic Republic": {
"Communicable & other Group I": "328.7",
"Injuries": "75.2",
"Noncommunicable diseases": "680.0"
},
"China": {
"Communicable & other Group I": "41.4",
"Noncommunicable diseases": "576.3",
"Injuries": "50.4"
},
"New Zealand": {
"Injuries": "32.9",
"Noncommunicable diseases": "313.6",
"Communicable & other Group I": "18.0"
},
"Papua New Guinea": {
"Injuries": "100.1",
"Communicable & other Group I": "554.3",
"Noncommunicable diseases": "693.2"
},
"Philippines": {
"Communicable & other Group I": "226.4",
"Noncommunicable diseases": "720.0",
"Injuries": "53.8"
},
"Malaysia": {
"Injuries": "62.8",
"Noncommunicable diseases": "563.2",
"Communicable & other Group I": "117.4"
},
"Australia": {
"Communicable & other Group I": "13.7",
"Noncommunicable diseases": "302.9",
"Injuries": "28.2"
},
"Fiji": {
"Noncommunicable diseases": "804.0",
"Injuries": "64.0",
"Communicable & other Group I": "105.2"
},
"Singapore": {
"Communicable & other Group I": "66.2",
"Noncommunicable diseases": "264.8",
"Injuries": "17.5"
},
"Republic of Korea": {
"Injuries": "53.1",
"Communicable & other Group I": "33.8",
"Noncommunicable diseases": "302.1"
}
}
},
points = [],
region_p,
region_val,
region_i,
country_p,
country_i,
cause_p,
cause_i,
cause_name = [],
region,
country,
cause;
cause_name['Communicable & other Group I'] = 'Communicable diseases';
cause_name['Noncommunicable diseases'] = 'Non-communicable diseases';
cause_name.Injuries = 'Injuries';
region_i = 0;
for (region in data) {
if (data.hasOwnProperty(region)) {
region_val = 0;
region_p = {
id: "id_" + region_i,
name: region,
color: Highcharts.getOptions().colors[region_i]
};
country_i = 0;
for (country in data[region]) {
if (data[region].hasOwnProperty(country)) {
country_p = {
id: region_p.id + "_" + country_i,
name: country,
parent: region_p.id
};
points.push(country_p);
cause_i = 0;
for (cause in data[region][country]) {
if (data[region][country].hasOwnProperty(cause)) {
cause_p = {
id: country_p.id + "_" + cause_i,
name: cause_name[cause],
parent: country_p.id,
value: Math.round(+data[region][country][cause])
};
region_val += cause_p.value;
points.push(cause_p);
cause_i = cause_i + 1;
}
}
country_i = country_i + 1;
}
}
region_p.value = Math.round(region_val / country_i);
points.push(region_p);
region_i = region_i + 1;
}
}
var options ={
credits: {
enabled: false
},
chart: {
borderColor: '#EBBA95',
borderWidth: 2,
renderTo : "container"
},
series: [{
type: "treemap",
layoutAlgorithm: 'squarified',
allowDrillToNode: true,
dataLabels: {
enabled: false
},
levelIsConstant: false,
levels: [{
level: 1,
dataLabels: {
enabled: true
},
borderWidth: 1
}],
data: points
}],
title: {
text: "Sample Tree"
}
};
var chart1 = new Highcharts.Chart(options);
$('#iClick').click(function(){
chart1.drillUp();
});
});
#container {
min-width: 300px;
max-width: 600px;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/heatmap.js"></script>
<script src="http://code.highcharts.com/modules/treemap.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>
<div id="container"></div><br/><br/>
<input id="iClick" type ="submit" value="Back"></div>