Skip to content

Commit 62fde44

Browse files
lirik90lirik90
committed
Merge branch 'feature/zoom-separately' into master
Added the overScaleMode option so that you can use zoom and pan separately for each scale when the mouse is over the scale.
1 parent 12c1b39 commit 62fde44

File tree

3 files changed

+202
-2
lines changed

3 files changed

+202
-2
lines changed

‎README.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,10 @@ plugins: {
4242
// },
4343
mode: 'xy',
4444

45+
// Which of the enabled panning directions should only be available
46+
// when the mouse cursor is over one of scale.
47+
overScaleMode: 'xy',
48+
4549
rangeMin: {
4650
// Format of min pan range depends on scale type
4751
x: null,
@@ -93,6 +97,10 @@ plugins: {
9397
// },
9498
mode: 'xy',
9599

100+
// Which of the enabled zooming directions should only be available
101+
// when the mouse cursor is over one of scale.
102+
overScaleMode: 'xy',
103+
96104
rangeMin: {
97105
// Format of min zoom range depends on scale type
98106
x: null,

‎samples/zoom-separately.html

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
<!doctype html>
2+
<html>
3+
4+
<head>
5+
<title>Chart.js Zoom each scale separately</title>
6+
<script src="../node_modules/chart.js/dist/chart.js"></script>
7+
<script src="../node_modules/hammerjs/hammer.min.js"></script>
8+
<script src="../dist/chartjs-plugin-zoom.min.js"></script>
9+
10+
<style>
11+
canvas {
12+
-moz-user-select: none;
13+
-webkit-user-select: none;
14+
-ms-user-select: none;
15+
}
16+
</style>
17+
</head>
18+
19+
<body>
20+
<canvas id="canvas"></canvas>
21+
<script>
22+
function genData() {
23+
var analogData = [];
24+
var digitalData = [];
25+
var angle = 1980;
26+
var limit = 35;
27+
for (var x = 0; x <= angle; x += 10) {
28+
var y = Math.sin(x * Math.PI / 180) * limit;
29+
analogData.push({x, y});
30+
31+
y = x === 0 ? -limit : x === angle ? limit : y;
32+
if (y === limit || y === -limit) {
33+
digitalData.push({x, y: y === -limit});
34+
}
35+
}
36+
37+
return [analogData, digitalData];
38+
}
39+
40+
function createConfig() {
41+
var [analogData, digitalData] = genData();
42+
return {
43+
data: {
44+
datasets: [{
45+
yAxisID: 'yA',
46+
label: 'Temperature',
47+
type: 'line',
48+
fill: false,
49+
borderColor: 'rgb(54, 162, 235)',
50+
data: analogData
51+
}, {
52+
yAxisID: 'yB',
53+
label: 'Heater',
54+
type: 'line',
55+
fill: false,
56+
steppedLine: true,
57+
borderColor: 'rgb(255, 99, 132)',
58+
data: digitalData
59+
}]
60+
},
61+
options: {
62+
responsive: true,
63+
title: {
64+
display: true,
65+
text: 'Chart.js Zoom each scale separately'
66+
},
67+
scales: {
68+
x: {
69+
type: 'linear',
70+
offset: true,
71+
scaleLabel: {
72+
display: true,
73+
labelString: 'x axis'
74+
}
75+
},
76+
yA: {
77+
id: 'A',
78+
offset: true,
79+
position: 'left',
80+
scaleLabel: {
81+
display: true,
82+
labelString: 'Analog'
83+
}
84+
},
85+
yB: {
86+
id: 'B',
87+
position: 'right',
88+
scaleLabel: {
89+
display: true,
90+
labelString: 'Digital'
91+
},
92+
ticks: {
93+
max: 2,
94+
min: -1,
95+
stepSize: 1
96+
}
97+
}
98+
},
99+
plugins: {
100+
zoom: {
101+
pan: {
102+
enabled: true,
103+
mode: 'xy',
104+
overScaleMode: 'y'
105+
},
106+
zoom: {
107+
enabled: true,
108+
mode: 'xy',
109+
overScaleMode: 'y'
110+
}
111+
}
112+
}
113+
}
114+
};
115+
}
116+
117+
window.onload = function() {
118+
var ctx = document.getElementById('canvas').getContext('2d');
119+
var config = createConfig();
120+
window.myChart = new window.Chart(ctx, config);
121+
};
122+
</script>
123+
</body>
124+
125+
</html>

‎src/plugin.js

Lines changed: 69 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,54 @@ function directionEnabled(mode, dir, chart) {
6464
return false;
6565
}
6666

67+
/** This function use for check what axis now under mouse cursor.
68+
* @param {number} [x] X position
69+
* @param {number} [y] Y position
70+
* @param {import('chart.js').Chart} [chart] instance of the chart in question
71+
*/
72+
function getScaleUnderPoint(x, y, chart) {
73+
var scales = chart.scales;
74+
var scaleIds = Object.keys(scales);
75+
for (var i = 0; i < scaleIds.length; i++) {
76+
var scale = scales[scaleIds[i]];
77+
if (y >= scale.top && y <= scale.bottom && x >= scale.left && x <= scale.right) {
78+
return scale;
79+
}
80+
}
81+
return null;
82+
}
83+
84+
/** This function return only one scale whose position is under mouse cursor and which direction is enabled.
85+
* If under mouse hasn't scale, then return all other scales which 'mode' is diffrent with overScaleMode.
86+
* So 'overScaleMode' works as a limiter to scale the user-selected scale (in 'mode') only when the cursor is under the scale,
87+
* and other directions in 'mode' works as before.
88+
* Example: mode = 'xy', overScaleMode = 'y' -> it's means 'x' - works as before, and 'y' only works for one scale when cursor is under it.
89+
* options.overScaleMode can be a function if user want zoom only one scale of many for example.
90+
* @param {any} [options] pan or zoom options
91+
* @param {number} [x] X position
92+
* @param {number} [y] Y position
93+
* @param {import('chart.js').Chart} [chart] instance of the chart in question
94+
*/
95+
function getEnabledScalesByPoint(options, x, y, chart) {
96+
if (options.enabled && options.overScaleMode) {
97+
var scale = getScaleUnderPoint(x, y, chart);
98+
var mode = typeof options.overScaleMode === 'function' ? options.overScaleMode({chart: chart}, scale) : options.overScaleMode;
99+
100+
if (scale && directionEnabled(mode, scale.axis, chart)) {
101+
return [scale];
102+
}
103+
104+
var enabledScales = [];
105+
each(chart.scales, function(scaleItem) {
106+
if (!directionEnabled(mode, scaleItem.axis, chart)) {
107+
enabledScales.push(scaleItem);
108+
}
109+
});
110+
return enabledScales;
111+
}
112+
return null;
113+
}
114+
67115
function rangeMaxLimiter(zoomPanOptions, newMax) {
68116
if (zoomPanOptions.scaleAxes && zoomPanOptions.rangeMax &&
69117
!isNullOrUndef(zoomPanOptions.rangeMax[zoomPanOptions.scaleAxes])) {
@@ -164,7 +212,13 @@ function doZoom(chart, percentZoomX, percentZoomY, focalPoint, whichAxes, animat
164212
_whichAxes = 'xy';
165213
}
166214

215+
var enabledScales = getEnabledScalesByPoint(zoomOptions, focalPoint.x, focalPoint.y, chart);
216+
167217
each(chart.scales, function(scale) {
218+
if (enabledScales && enabledScales.indexOf(scale) === -1) {
219+
return;
220+
}
221+
168222
if (scale.isHorizontal() && directionEnabled(zoomMode, 'x', chart) && directionEnabled(_whichAxes, 'x', chart)) {
169223
zoomOptions.scaleAxes = 'x';
170224
zoomScale(scale, percentZoomX, focalPoint, zoomOptions);
@@ -245,13 +299,17 @@ function panScale(scale, delta, panOptions) {
245299
}
246300
}
247301

248-
function doPan(chartInstance, deltaX, deltaY) {
302+
function doPan(chartInstance, deltaX, deltaY, panningScales) {
249303
storeOriginalOptions(chartInstance);
250304
var panOptions = chartInstance.$zoom._options.pan;
251305
if (panOptions.enabled) {
252306
var panMode = typeof panOptions.mode === 'function' ? panOptions.mode({chart: chartInstance}) : panOptions.mode;
253307

254308
each(chartInstance.scales, function(scale) {
309+
if (panningScales && panningScales.indexOf(scale) === -1) {
310+
return;
311+
}
312+
255313
if (scale.isHorizontal() && directionEnabled(panMode, 'x', chartInstance) && deltaX !== 0) {
256314
panOptions.scaleAxes = 'x';
257315
panScale(scale, deltaX, panOptions);
@@ -538,24 +596,33 @@ var zoomPlugin = {
538596
var currentDeltaX = null;
539597
var currentDeltaY = null;
540598
var panning = false;
599+
var panningScales = null;
541600
var handlePan = function(e) {
542601
if (currentDeltaX !== null && currentDeltaY !== null) {
543602
panning = true;
544603
var deltaX = e.deltaX - currentDeltaX;
545604
var deltaY = e.deltaY - currentDeltaY;
546605
currentDeltaX = e.deltaX;
547606
currentDeltaY = e.deltaY;
548-
doPan(chartInstance, deltaX, deltaY);
607+
doPan(chartInstance, deltaX, deltaY, panningScales);
549608
}
550609
};
551610

552611
mc.on('panstart', function(e) {
612+
if (panOptions.enabled) {
613+
var rect = e.target.getBoundingClientRect();
614+
var x = e.center.x - rect.left;
615+
var y = e.center.y - rect.top;
616+
panningScales = getEnabledScalesByPoint(panOptions, x, y, chartInstance);
617+
}
618+
553619
currentDeltaX = 0;
554620
currentDeltaY = 0;
555621
handlePan(e);
556622
});
557623
mc.on('panmove', handlePan);
558624
mc.on('panend', function() {
625+
panningScales = null;
559626
currentDeltaX = null;
560627
currentDeltaY = null;
561628
setTimeout(function() {

0 commit comments

Comments
 (0)