HTMLcopy
1
<div id="container"></div>
CSScopy
6
1
html, body, #container {
2
width: 100%;
3
height: 100%;
4
margin: 0;
5
padding: 0;
6
}
JavaScriptcopy
x
1
anychart.onDocumentReady(function () {
2
var data = getData();
3
4
var chart = anychart.treeMap(data);
5
chart.maxDepth(3);
6
7
// Create color scale.
8
var customColorScale = anychart.scales.linearColor();
9
customColorScale.colors(["#2BC0E4", "#EAECC6"]);
10
11
// Set color scale.
12
chart.colorScale(customColorScale);
13
14
chart.title("Set color scale using custom colors");
15
chart.container("container");
16
chart.draw();
17
18
});
19
function getData() {
20
return [
21
{
22
name: 'Eurasia',
23
children: [
24
{
25
name: "Asia", children: [
26
{
27
name: "Eastern Asia", children: [
28
{name: "Mongolia", value: 1464116, capital: 'Ulan-Bator'},
29
{name: "China", value: 1364116, capital: 'Beijing'},
30
{name: "Southern Korea", value: 1564116, capital: 'Seoul'},
31
{name: "Northern Korea", value: 120540, capital: 'Pyongyang'},
32
{name: "Japan", value: 1564116, capital: 'Tokio'}
33
]
34
}
35
]
36
},
37
{
38
name: "Europe", children: [
39
{
40
name: "Northern Europe", children: [
41
{name: "Finland", value: 338424, capital: 'Helsinki'},
42
{name: "Great Britain", value: 209331, capital: 'London'},
43
{name: "Ireland", value: 84421, capital: 'Dublin'},
44
{name: "Scandinavia", value: 928057}
45
]
46
}
47
]
48
}
49
]
50
}
51
]
52
}