Highcharts Baum (Treemap)
In diesem Kapitel werden wir Highcharts Heatmap einführen.
Im vorigen Abschnitt wissen wir bereits Highcharts Konfigurationssyntax. Schauen wir uns die anderen Konfigurationen Highcharts aussehen.
Baum
Reihenkonfiguration
Das type-Attribut gesetzt Serie treemap, series.type Spalte beschreibt den Datentyp. Der Standardwert ist "Linie".
var chart = {
type: 'treemap'
};
Beispiele
Dateiname: highcharts_tree_map.htm
<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 本教程(w3big.com)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/treemap.js"></script>
<script src="http://code.highcharts.com/modules/heatmap.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {
var title = {
text: 'Highcharts Treemap'
};
var colorAxis = {
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
};
var series= [{
type: "treemap",
layoutAlgorithm: 'squarified',
data: [{
name: 'A',
value: 6,
colorValue: 1
}, {
name: 'B',
value: 6,
colorValue: 2
}, {
name: 'C',
value: 4,
colorValue: 3
}, {
name: 'D',
value: 3,
colorValue: 4
}, {
name: 'E',
value: 2,
colorValue: 5
}, {
name: 'F',
value: 2,
colorValue: 6
}, {
name: 'G',
value: 1,
colorValue: 7
}]
}];
var json = {};
json.title = title;
json.colorAxis = colorAxis;
json.series = series;
$('#container').highcharts(json);
});
</script>
</body>
</html>
Das obige Beispiel Ausgabe lautet:
Auf verschiedenen Ebenen des Baumes
Das folgende Beispiel verwendet verschiedene Farben die verschiedenen Ebenen der Baum zu identifizieren.
Beispiele
Dateiname: highcharts_tree_levels.htm (Source Code Beispiele, klicken Sie bitte zu sehen)
<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 本教程(w3big.com)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/treemap.js"></script>
<script src="http://code.highcharts.com/modules/heatmap.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {
var title = {
text: 'Fruit consumption'
};
var series = [{
type: "treemap",
layoutAlgorithm: 'stripes',
alternateStartingDirection: true,
levels: [{
level: 1,
layoutAlgorithm: 'sliceAndDice',
dataLabels: {
enabled: true,
align: 'left',
verticalAlign: 'top',
style: {
fontSize: '15px',
fontWeight: 'bold'
}
}
}],
data: [{
id: 'A',
name: 'Apples',
color: "#EC2500"
}, {
id:'B',
name: 'Bananas',
color: "#ECE100"
}, {
id: 'O',
name: 'Oranges',
color: '#EC9800'
}, {
name: 'Anne',
parent: 'A',
value: 5
}, {
name: 'Rick',
parent: 'A',
value: 3
}, {
name: 'Peter',
parent: 'A',
value: 4
}, {
name: 'Anne',
parent: 'B',
value: 4
}, {
name: 'Rick',
parent: 'B',
value: 10
}, {
name: 'Peter',
parent: 'B',
value: 1
}, {
name: 'Anne',
parent: 'O',
value: 1
}, {
name: 'Rick',
parent: 'O',
value: 3
}, {
name: 'Peter',
parent: 'O',
value: 3
}, {
name: 'Susanne',
parent: 'Kiwi',
value: 2,
color: '#9EDE00'
}]
}];
var json = {};
json.title = title;
json.series = series;
$('#container').highcharts(json);
});
</script>
</body>
</html>
Das obige Beispiel Ausgabe lautet:
Große Datenmengen tree
Die folgenden Beispiele von Farb große Menge von Daten Baum, spezifische Beispiele für die Daten zur Verfügung, indem Sie auf den "versuchen" klicken anzuzeigen.
Dateiname: highcharts_tree_largemap.htm
<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 本教程(w3big.com)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/treemap.js"></script>
<script src="http://code.highcharts.com/modules/heatmap.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {
//省略部分 js 代码
var data = {……};
var points = [],
region_p,
region_val,
region_i,
country_p,
country_i,
cause_p,
cause_i,
cause_name = [];
cause_name['Communicable & other Group I'] = 'Communicable diseases';
cause_name['Noncommunicable diseases'] = 'Non-communicable diseases';
cause_name['Injuries'] = 'Injuries';
region_i = 0;
for (var region in data) {
region_val = 0;
region_p = {
id: "id_" + region_i,
name: region,
color: Highcharts.getOptions().colors[region_i]
};
country_i = 0;
for (var country in data[region]) {
country_p = {
id: region_p.id + "_" + country_i,
name: country,
parent: region_p.id
};
points.push(country_p);
cause_i = 0;
for (var cause in data[region][country]) {
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++;
}
country_i++;
}
region_p.value = Math.round(region_val / country_i);
points.push(region_p);
region_i++;
}
var chart = {
renderTo: 'container'
};
var title = {
text: 'Global Mortality Rate 2012, per 100 000 population'
};
var subtitle: {
text: 'Click points to drill down. Source: <a href="http://apps.who.int/gho/data/node.main.12?lang=en">WHO</a>.'
};
var series = [{
type: "treemap",
layoutAlgorithm: 'squarified',
allowDrillToNode: true,
dataLabels: {
enabled: false
},
levelIsConstant: false,
levels: [{
level: 1,
dataLabels: {
enabled: true
},
borderWidth: 3
}],
data: points
}];
var json = {};
json.title = title;
json.series = series;
$('#container').highcharts(json);
});
</script>
</body>
</html>
Das obige Beispiel Ausgabe lautet: