HTMLcopy
x
1
<div id="container"></div>
2
CSScopy
6
1
html, body, #container {
2
width: 100%;
3
height: 100%;
4
margin: 0;
5
padding: 0;
6
}
JavaScriptcopy
188
1
anychart.onDocumentReady(function () {
2
var geojsonProvince = "https://raw.githubusercontent.com/FEFFOIOS/geojson/main/province.geojson"
3
4
anychart.data.loadJsonFile(geojsonProvince, function (data) {
5
var map = anychart.map();
6
7
map.geoData(data);
8
map.credits(false);
9
map.overlapMode(false);
10
map.background().enabled(false);
11
map.interactivity().multiSelectOnClick(true);
12
map.interactivity().selectionMode('none');
13
map.interactivity().zoomOnMouseWheel(true);
14
map.interactivity().zoomOnDoubleClick(true);
15
map.unboundRegions().enabled(true).fill('#E1E1E1').stroke('#D2D2D2');
16
map.listen('pointsHover', function (evt) {
17
if (!evt.currentPoint.hovered) {
18
return;
19
}
20
});
21
22
//maggioranza(map, data);
23
presenza(map);
24
//areaDiMinaccia(map, data);
25
//desitaDiCompetitiva(map, data);
26
27
var labels = map.labels();
28
labels.enabled(true);
29
labels.fontFamily("Calibri");
30
labels.fontWeight(400);
31
labels.fontColor('#000');
32
labels.fontSize(10);
33
labels.format("{%name}");
34
// modo alternativo
35
//labels.format(function () {
36
// return this.getData('prov_name');
37
//});
38
39
var tooltip = map.tooltip();
40
tooltip.enabled(true);
41
tooltip.fontFamily("Calibri");
42
tooltip.fontWeight(400);
43
tooltip.fontColor('#FFF');
44
tooltip.fontSize(14);
45
tooltip.titleFormat("{%name}");
46
tooltip.format("Regione: {%region}\nValore: {%value} della serie: {%seriesName}");
47
48
// show '+' and '-' for zoom
49
var zoomController = anychart.ui.zoom();
50
zoomController.render(map);
51
52
map.container('container');
53
map.draw();
54
});
55
});
56
57
function maggioranza(map, data) {
58
var colorScale = anychart.scales.ordinalColor([
59
{from: 0, to: 499, color: "#ff9999"},
60
{from: 500, to: 1000, color: "#99ccff"}
61
]);
62
63
var series1 = map.choropleth(createSeries(data));
64
series1.name("serie 1");
65
series1.colorScale(colorScale);
66
67
var series2 = map.choropleth(createSeries(data));
68
series2.name("serie 2");
69
series2.colorScale(colorScale);
70
}
71
72
function presenza(map) {
73
var data1 = [
74
{'id': '1', 'size': 300},
75
{'id': '2', 'size': 240},
76
{'id': '3', 'size': 75},
77
{'id': '4', 'size': 130},
78
{'id': '5', 'size': 900, 'value': 190}
79
];
80
var data2 = [
81
{'id': '1', 'size': 500},
82
{'id': '2', 'size': 140},
83
{'id': '3', 'size': 900, 'value': 750},
84
{'id': '4', 'size': 30},
85
{'id': '5', 'size': 10}
86
];
87
var data3 = [
88
{'id': '1', 'size': 900, 'value': 900},
89
{'id': '2', 'size': 900, 'value': 400},
90
{'id': '3', 'size': 351},
91
{'id': '4', 'size': 115},
92
{'id': '5', 'size': 1}
93
];
94
95
map.legend()
96
.enabled(true)
97
.position('center-top')
98
.align('center')
99
.itemsLayout('horizontal')
100
.padding(0, 0, 30, 0)
101
.paginator(false);
102
103
map.minBubbleSize('2%');
104
map.maxBubbleSize('5%');
105
106
var series1 = map.bubble(data1);
107
series1.name('serie 1');
108
series1.legendItem({ iconType: 'circle' });
109
series1.overlapMode(false);
110
series1.normal().fill("#90caf9", .3);
111
series1.normal().stroke("#90caf9", 1);
112
series1.hovered().fill("#90caf9", .1);
113
series1.hovered().stroke("#90caf9", 2);
114
//series1.labels().fontColor("#0277bd");
115
116
var series2 = map.bubble(data2);
117
series2.name('serie 2');
118
series2.legendItem({ iconType: 'circle' });
119
series2.overlapMode(false);
120
series2.normal().fill("#1978ce", .3);
121
series2.normal().stroke("#1978ce", 1);
122
series2.hovered().fill("#1978ce", .1);
123
series2.hovered().stroke("#90caf9", 2);
124
//series2.labels().fontColor("#0277bd");
125
126
var series3 = map.bubble(data3);
127
series3.name('serie 3');
128
series3.legendItem({ iconType: 'circle' });
129
series3.overlapMode(false);
130
series3.normal().fill("#f06c16", .3);
131
series3.normal().stroke("#f06c16", 1);
132
series3.hovered().fill("#f06c16", .1);
133
series3.hovered().stroke("#f06c16", 2);
134
//series3.labels().fontColor("#0277bd");
135
136
//series3.selected().fill("#00cc99", 0.5);
137
//series3.normal().stroke("#00cc99");
138
//series3.hovered().stroke("#00cc99", 2);
139
//series3.selected().stroke("#00cc99", 4);
140
//series.normal().stroke("black");
141
//series.selected().stroke("black", 2);
142
}
143
144
function areaDiMinaccia(map, data) {
145
var series = map.choropleth(createSeries(data));
146
series.colorScale(
147
anychart.scales.ordinalColor([
148
{less:299, color:'#3d7b46'},
149
{from:300, to:699, color:'#ffc107'},
150
{greater:700, color:'#ba1a1a'}
151
])
152
);
153
154
addColorRange(map);
155
}
156
157
function desitaDiCompetitiva(map, data) {
158
var series = map.choropleth(createSeries(data));
159
series.colorScale(anychart.scales.linearColor());
160
161
var colors = anychart.color.singleHueProgression('#0068BC');
162
series.colorScale().colors(colors);
163
164
addColorRange(map);
165
}
166
167
function createSeries(jsonData) {
168
var data = [];
169
var features = jsonData.features;
170
171
for (var i = 0; i < features.length; i++) {
172
var feature = features[i];
173
var id = feature.properties.id;
174
var name = feature.properties.name;
175
176
if ((Math.floor(Math.random() * 100) % 2) == 0) {
177
data.push({id: id, name: name, value: Math.floor(Math.random() * 1000)});
178
}
179
}
180
181
return data;
182
}
183
184
function addColorRange(map) {
185
var colorRange = map.colorRange();
186
colorRange.enabled(true)
187
colorRange.stroke('#BBB');
188
}