Chart.jsでグラフをパン（PANまたはドラッグ、スクロール）操作するサンプルを作成しました。
Chart.jsはプラグインを読み込むことで機能拡張することができます。この拡張性・柔軟性の高さがChart.jsの人気の一因かと思います（メンテする方は大変そうですが）。プラグインは公式サイトでも公開されており、信頼性についても心配なさそうです。
Popular Extensions – chartjs.org
今回グラフをパン操作するにあたり、公式サイトで公開されているchartjs-plugin-zoomプラグインを使用しました。サンプルに加えこのプラグインの使い方をさらっと説明します。どなたかの参考になればと思います。
See the Pen Chart.js(pan) by senmyou (@senmyou) on CodePen.
プラグインの読み込み
chartjs-plugin-zoomプラグインではhammer.jsを利用しています。このためchartjs-plugin-zoomプラグインを読み込む前にhammer.jsを読み込む必要があります（読み込む順番が逆の場合エラーは出ませんがジェスチャーイベントがリスナーに登録されません）。
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/0.6.3/chartjs-plugin-zoom.js'></script>
if (Hammer) {
var mc = new Hammer.Manager(node);
mc.add(new Hammer.Pinch());
mc.add(new Hammer.Pan({
threshold: panThreshold
}));
.....
mc.on('panstart', function(e) {
currentDeltaX = 0;
currentDeltaY = 0;
handlePan(e);
});
mc.on('panmove', handlePan);
mc.on('panend', function(e) {
currentDeltaX = null;
currentDeltaY = null;
zoomNS.panCumulativeDelta = 0;
setTimeout(function() { panning = false; }, 500);
});
オプションの設定
-
options.pan.enabledとoptions.zoom.enabledをtrueに設定します。なにやらPANのみ行う場合もzoom.enabledをtrueにする必要があるみたいです（modeは空文字）。
Pan doesn’t work without `zoom.enabled` #132 -
options.pan.rangeMin/rangeMaxにパン操作の有効範囲を設定します。パンやズーム操作時にrangeMin/rangeMaxに達すると、そこで操作を止めてくれます。設定するかどうかは任意で、設定しなくても問題なく動きます。
-
options.xAxes.min/maxにCanvas要素内に表示する範囲を設定します。これを設定しないと全データをCanvas要素いっぱいに拡大縮小して表示します。
options: {
pan: {
enabled: true,
mode: "x",
rangeMin: {
x: rangeMin
},
rangeMax: {
x: rangeMax
},
},
zoom: {
enabled: true,
mode: ""
},
xAxes: [{
type: 'time',
time: {
min: min,
max: max
},
最後に現在作成中のアプリで使用する予定のグラフを掲載します。データの作成部分はデバッグ中なのでオプションの設定だけ参考にして頂けたらと思います。Chart.jsはグラフのスタイリングを細かく設定できますしプラグインもたくさんあるのでデザインを決めるのに迷ってしまいますね。
See the Pen Chart.js(pan) by senmyou (@senmyou) on CodePen.