HTMLcopy
x
1
scrollOnMouseWheel
2
3
4
<meta charset="UTF-8">
5
<meta name="ac:name" content="anychart.core.graph.elementsInteractivity.zoomAndScroll_set">
6
<meta name="ac:short-desc" content="">
7
<meta name="ac:desc" content="">
8
9
10
11
12
<link rel="stylesheet" type="text/css" href="https://cdn.anychart.com/releases/8.13.0/css/anychart-ui.min.css">
13
<style>
14
html, body, #container {
15
width: 100%;
16
height: 100%;
17
margin: 0;
18
padding: 0;
19
}
20
</style>
21
22
23
<div id="container"></div>
CSScopy
6
1
html, body, #container {
2
width: 100%;
3
height: 100%;
4
margin: 0;
5
padding: 0;
6
}
JavaScriptcopy
49
1
anychart.onDocumentLoad(function() {
2
var stage = acgraph.create('container');
3
4
var chart1 = anychart.graph();
5
chart1.data(data);
6
chart1.title().enabled(true).text('Zoom on mousewheel');
7
chart1.bounds(0, 0, '50%', '100%');
8
chart1.interactivity().zoomOnMouseWheel(true);
9
10
var chart2 = anychart.graph(data);
11
chart2.title().enabled(true).text('Scroll on mousewheel');
12
chart2.bounds('50%', 0, '50%', '100%');
13
chart1.interactivity().scrollOnMouseWheel(true);
14
chart2.container(stage).draw();
15
chart1.container(stage).draw();
16
});
17
var data = {
18
nodes: [
19
{"id": "a"},
20
{"id": "a1"},
21
{"id": "a2"},
22
{"id": "a3"},
23
{"id": "a4"},
24
{"id": "a5"},
25
{"id": "a6"},
26
{"id": "b"},
27
{"id": "b1"},
28
{"id": "b2"},
29
{"id": "b3"},
30
{"id": "b4"},
31
{"id": "b5"},
32
{"id": "b6"}
33
],
34
edges: [
35
{from: 'a', to: 'b'},
36
{from: 'a', to: 'a1'},
37
{from: 'a', to: 'a2'},
38
{from: 'a', to: 'a3'},
39
{from: 'a', to: 'a4'},
40
{from: 'a', to: 'a5'},
41
{from: 'a', to: 'a6'},
42
{from: 'b', to: 'b1'},
43
{from: 'b', to: 'b2'},
44
{from: 'b', to: 'b3'},
45
{from: 'b', to: 'b4'},
46
{from: 'b', to: 'b5'},
47
{from: 'b', to: 'b6'},
48
]
49
};