Q&A
HTMLもご提示ください。
前提・実現したいこと
グラフを描画するChart.jsを使用しております。
Pluginを利用することで、マウスのあるx,y座標を基準にマウスホイールでグラフの拡大・縮小を行うことができます。
これをボタンを押すことで、wheelイベントを発生させ、chartの拡大・縮小を行いたいと考えています。
以下のコードでwheelイベントは実行されますが、要素の左上を基準にwheelされます。これを、要素の上下左右の中央でwheelされるようにしたいのですが、実現方法はありますでしょうか？
該当のソースコード
$(document).on("click", '#button', function () { var evt = document.createEvent('MouseEvents'); evt.initEvent('wheel', true, true); evt.deltaY = -100; document.getElementById("myChart").dispatchEvent(evt); });
試したこと
上記のコードに★マーク（値は適当）を追加しましたが、効きませんでした。
evt.deltaY = -100; ★evt.offsetX = 300; ★evt.offsetY = 300; document.getElementById("myChart").dispatchEvent(evt);
また、
evt.initMouseEvent ("wheel",...
の形式でscreenX,screenYの値を設定してみましたが、効きませんでした。
追記
htmlコード
<canvas id='myChart'></canvas> <button id="button">ボタン</button>
chartを生成するjavascriptコード
$(function(){ ctx = document.getElementById('myChart').getContext('2d'); config= { //各種設定 }; myChart = new Chart(ctx,config); //---myChartの生成 };
chart描画後のhtmlソース
<div id="chart_view"> <canvas id="myChart" style="display: block; touch-action: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); class="chartjs-render-monitor"> </canvas> </div>
追記2
再現いただけるコードを準備しました。
以下のコードで表示されるグラフについて、ボタンを押すと<canvas id="myChart">の左上をマウスホイールにて縮小している動作となります。これを、何とかして画面の真ん中でマウスホイールしている扱いにできないかと苦戦しています。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>グラフ</title> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js?<?php echo time(); ?>"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js?<?php echo time(); ?>"></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js'></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@0.7.4"></script> </head> <body> <h1>折れ線グラフ</h1> <canvas id="myChart"></canvas> <button id="button">ボタン</button> <script> $(function(){ ctx = document.getElementById('myChart').getContext('2d'); ctx.canvas.height = 100; var config = { type: 'line', data: { labels: ['8月1日', '8月2日', '8月3日', '8月4日', '8月5日', '8月6日', '8月7日'], datasets: [ { label: '最高気温(度）', data: [35, 34, 37, 35, 34, 35, 34, 25], borderColor: "rgba(255,0,0,1)", backgroundColor: "rgba(0,0,0,0)" }, { label: '最低気温(度）', data: [25, 27, 27, 25, 26, 27, 25, 21], borderColor: "rgba(0,0,255,1)", backgroundColor: "rgba(0,0,0,0)" } ], }, options: { title: { display: true, text: '気温（8月1日~8月7日）' }, scales: { yAxes: [{ type: 'linear', ticks: { suggestedMax: 40, suggestedMin: 0, stepSize: 10, callback: function(value, index, values){ return value + '度' } } }] }, pan: { enabled: true, mode: 'xy', }, zoom: { enabled: true, mode: 'xy', }, zoom: { enabled: true, mode: 'xy', } } }; myChart = new Chart(ctx,config); $(document).on("click", '#button', function () { var evt = document.createEvent('MouseEvents'); evt.initEvent('wheel', true, true); evt.deltaY = 100; document.getElementById("myChart").dispatchEvent(evt); }); }); </script> </body> </html>
HTMLを追記いたしました。
解決策をご教示いただけますと幸いです。
よろしくお願いいたします。
コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/help/question-tips#questionTips3-7
https://teratail.com/questions/238564
あと細かいんですが、
charat.js → Chart.jsではないかと。
グラフ内の話であれば、グラフを描けないことには対応もできないかと思いますが、こちらで勝手に用意したグラフで良いのでしょうか。
ご指摘ありがとうございます。
Chart.jsの間違いでした。
code機能についてもご教授ありがとうございました。修正いたしました。
グラフについては、再現可能なコードを準備いたしました。こちらをご利用いただければと思います。
よろしくお願いいたします。
回答1件
0
自己解決
自己解決いたしました。
var evt = new WheelEvent( "wheel", { deltaX: 0 , deltaY: delta_y , deltaZ: 0 , deltaMode: 0 , clientX : x, clientY : y, }) ;
この形式でねらいの動作を実現できました。
投稿2020/10/18 12:22
総合スコア1
あなたの回答
tips
プレビュー
