HTMLcopy
1
<label id="titleLabel">Use Mouse Wheel To:</label>
2
<label><input onclick="enableZoom()" type="radio" name="mode" checked>Zoom</label>
3
<label><input onclick="enableScroll()" type="radio" name="mode">Scroll</label>
4
<label><input onclick="disableZoomAndScroll()" type="radio" name="mode">None</label>
5
<div id="container"></div>
CSScopy
19
1
html, body {
2
width: 100%;
3
height: 100%;
4
margin: 0;
5
padding: 0;
6
}
7
label {
8
display: inline-block;
9
margin: 10px 0 0 10px;
10
}
11
#titleLabel {
12
font-weight: 600;
13
}
14
#container {
15
position: absolute;
16
width: 100%;
17
top: 35px;
18
bottom: 0;
19
}
JavaScriptcopy
x
1
anychart.onDocumentReady(function () {
2
3
// create data
4
var data = {
5
nodes: [
6
{id: "Richard"},
7
{id: "Larry"},
8
{id: "Marta"},
9
{id: "Jane"},
10
{id: "Norma"},
11
{id: "Frank"},
12
{id: "Brett"},
13
{id: "Tommy"}
14
],
15
edges: [
16
{from: "Richard", to: "Larry"},
17
{from: "Richard", to: "Marta"},
18
{from: "Larry", to: "Marta"},
19
{from: "Marta", to: "Jane"},
20
{from: "Jane", to: "Norma"},
21
{from: "Jane", to: "Frank"},
22
{from: "Jane", to: "Brett"},
23
{from: "Brett", to: "Frank"}
24
]
25
};
26
27
// create a chart and set the data
28
chart = anychart.graph(data);
29
30
// set the chart title
31
chart.title("Network Graph: Chart Behavior");
32
33
// set the container id
34
chart.container("container");
35
36
// initiate drawing the chart
37
chart.draw();
38
});
39
40
// allow zooming the chart with the mouse wheel
41
function enableZoom() {
42
chart.interactivity().zoomOnMouseWheel(true);
43
}
44
45
// allow scrolling the chart with the mouse wheel
46
function enableScroll() {
47
chart.interactivity().scrollOnMouseWheel(true);
48
}
49
50
// prevent zooming and scrolling the chart with the mouse wheel
51
function disableZoomAndScroll() {
52
chart.interactivity().zoomOnMouseWheel(false);
53
chart.interactivity().scrollOnMouseWheel(false);
54
}