###前提・実現したいこと
現在Chart.js 2.1.3 で開発しているシステムの改修を行っているのですが
仕様変更でグラフの横幅が広くなったものがあり、スクロールバーでスクロールさせたいという要望があり
調べていたのですがChart.js 1.xで動作するサンプルを発見して内容も理解できたのですが
2.xで動作させようとするとなくなってしまったオブジェクトがあるようで動作しませんでした。
いろいろ試行錯誤しているのですが、本家のサイトにも情報が少なく知見がある方がいらっしゃれば教えて頂きたいと思い投稿しました。
###Chart.js 1.x で操作するソース(html)
<!DOCTYPE html> <html lang="js"> <head> <title>MIX CHART TEST</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="css/style.css" rel="stylesheet"> </head> <body> <div class="chartWrapper"> <div class="chartAreaWrapper"> <canvas id="myChart" height="300" width="1200"></canvas> </div> <canvas id="myChartAxis" height="300" width="0"></canvas> </div> <script type="text/javascript" src="https://rawgit.com/nnnick/Chart.js/v1.0.2/Chart.min.js"></script> <script> var ctx = document.getElementById("myChart").getContext("2d"); var data = { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [ { label: "My First dataset", fillColor: "rgba(220,220,220,0.2)", strokeColor: "rgba(220,220,220,1)", pointColor: "rgba(220,220,220,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(220,220,220,1)", data: [65, 59, 80, 81, 56, 55, 40] }, { label: "My Second dataset", fillColor: "rgba(151,187,205,0.2)", strokeColor: "rgba(151,187,205,1)", pointColor: "rgba(151,187,205,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(151,187,205,1)", data: [28, 48, 40, 19, 86, 27, 90] } ] }; new Chart(ctx).Bar(data, { onAnimationComplete: function () { var sourceCanvas = this.chart.ctx.canvas; var copyWidth = this.scale.xScalePaddingLeft - 5; console.log(this); // the +5 is so that the bottommost y axis label is not clipped off // we could factor this in using measureText if we wanted to be generic var copyHeight = this.scale.endPoint + 5; var targetCtx = document.getElementById("myChartAxis").getContext("2d"); targetCtx.canvas.width = copyWidth; targetCtx.drawImage(sourceCanvas, 0, 0, copyWidth, copyHeight, 0, 0, copyWidth, copyHeight); } }); </script> </body> </html>
#####style.css
.chartWrapper { position: relative; } .chartWrapper > canvas { position: absolute; left: 0; top: 0; pointer-events:none; } .chartAreaWrapper { width: 600px; overflow-x: scroll; }
###Chart.js 2.xで試しているソース(html)
<!DOCTYPE html> <html lang="js"> <head> <title>MIX CHART TEST</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="css/style.css" rel="stylesheet"> </head> <body> <div class="chartWrapper"> <div class="chartAreaWrapper"> <canvas id="myChart" height="300" width="1200"></canvas> </div> <canvas id="myChartAxis" height="300" width="0"></canvas> </div> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.min.js"></script> <!--<script type="text/javascript" src="https://rawgit.com/nnnick/Chart.js/v1.0.2/Chart.min.js"></script>--> <script> var data = { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [ { label: "My First dataset", fillColor: "rgba(220,220,220,0.2)", strokeColor: "rgba(220,220,220,1)", pointColor: "rgba(220,220,220,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(220,220,220,1)", data: [65, 59, 80, 81, 56, 55, 40] }, { label: "My Second dataset", fillColor: "rgba(151,187,205,0.2)", strokeColor: "rgba(151,187,205,1)", pointColor: "rgba(151,187,205,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(151,187,205,1)", data: [28, 48, 40, 19, 86, 27, 90] } ] }; var complexChartOption = { responsive: true, scales: { yAxes: [{ id: "y-axis-1", type: "linear", position: "left", ticks: { max: 0.2, min: 0, stepSize: 0.1 }, }, { id: "y-axis-2", type: "linear", position: "right", ticks: { max: 1.5, min: 0, stepSize: .5 }, gridLines: { drawOnChartArea: false, }, }], }, animation: { duration: 2000, onComplete: function(data) { console.log('onAnimationComplete Start'); // var _this = myBar; // var chartInstance = _this.chart; // var ctx = chartInstance.ctx; console.log(this); // console.log(_this); // var sourceCanvas = _this.chart.ctx.canvas; // var copyWidth = _this.scale.xScalePaddingLeft - 5; // // the +5 is so that the bottommost y axis label is not clipped off // // we could factor this in using measureText if we wanted to be generic // var copyHeight = _this.scale.endPoint + 5; // var targetCtx = document.getElementById("myChartAxis").getContext("2d"); // targetCtx.canvas.width = copyWidth; // targetCtx.drawImage(sourceCanvas, 0, 0, copyWidth, copyHeight, 0, 0, copyWidth, copyHeight); var getParentIdName = this.chart.canvas.attributes.id.value, targetElement = document.getElementById("myChartAxis"), sourceElement = document.getElementById("myChart"), sourceCanvas = this.chart.ctx.canvas, copyWidth = this.scales["y-axis-1"].width, // we are copying the width of actual chart copyHeight = this.chart.height, // we are copying the width of actual chart targetElementWidth = sourceElement.getContext("2d").canvas.clientWidth, targetElementHeight = sourceElement.getContext("2d").canvas.clientHeight, targetCtx = targetElement.getContext("2d"); targetCtx.canvas.width = copyWidth; targetCtx.canvas.height = copyHeight; // targetCtx.drawImage(sourceCanvas, 0, 0, targetElementWidth, targetElementHeight); targetCtx.drawImage(sourceCanvas, 0, 0, copyWidth, copyHeight, 0, 0, copyWidth, copyHeight); console.log('onAnimationComplete End'); } } }; window.onload = function() { ctx = document.getElementById("myChart").getContext("2d"); window.myBar = new Chart(ctx, { type: 'bar', data: data, options: complexChartOption, }); }; </script> </body> </html>
###試したこと
1.xのソースそのままですと「this.scale」というオブジェクトがないので「this.scale.xScalePaddingLeft」でエラーとなってしまいます。
上のソースは2.xのオブジェクトを目視して作ってみたものですが、エラーは出ないですが動きません…
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。