質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

4135閲覧

Chart.js 1.xのグラフを2.xで動作させたい

masahiro.o

総合スコア16

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2017/05/12 08:44

###前提・実現したいこと
現在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のオブジェクトを目視して作ってみたものですが、エラーは出ないですが動きません…

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

見て頂いた方、検証して頂いた方がいらっしゃったらすいません。自己解決しました。
そもそもcavasのdrawImageメソッドの値を手動で修正しても反映されないので不思議に思って調べていたところ
グラフのオプション「responsive」が「true」だとcavasのサイズ指定を無視してグラフを描画する仕様があることが分かりました。
これを「false」とすることで目的であるスクロールバーの表示はできました。
(v.1でとれている値が取れない課題は残っていますが…)
「responsive」レスポンシブデザイン用のオプションだと思うのですが必要になった場合はcssで以下みたいにすれば対応できるかと思います。

<div class="chart_container"> <canvas id="myChart" width="320" height="360"></canvas> </div> <style> @media screen and (min-width: 768px) { .chart_container { width: 640px; margin: auto; } } </style>

####V.2.xで動作するソース

<!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> 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: false, animation: { onComplete: function(data) { console.log('onComplete Start'); var sourceCanvas = this.chart.ctx.canvas; var getParentIdName = this.chart.canvas.attributes.id.value, targetElement = document.getElementById("myChartAxis"), sourceElement = document.getElementById("myChart"), copyWidth = this.scales["y-axis-0"].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, copyWidth, copyHeight, 0, 0, copyWidth, copyHeight); targetCtx.drawImage(sourceCanvas, 0, 0, targetElementWidth, targetElementHeight); console.log('onComplete End'); } } }; window.onload = function() { ctx = document.getElementById("myChart").getContext("2d"); window.myBar = new Chart(ctx, { type: 'bar', data: data, options: complexChartOption, }); }; </script> </body> </html>

投稿2017/05/15 02:08

masahiro.o

総合スコア16

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問