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

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

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

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

HTML5

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

JavaScript

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

2回答

5030閲覧

bootstrapで作成したタブ内にグラフを表示させるには...?

sp_master

総合スコア10

canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

HTML5

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

JavaScript

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2015/11/11 15:28

###前提・実現したいこと
Bootstrapをつかってタブを作り、各タブ内に Chart.js を利用した折れ線グラフを表示させたい

###発生している問題・エラーメッセージ
1つ目のタブには表示されるが、それ以外には表示されない

html内に2つ以上グラフを作成できないのかと思い、タブ外に表示させてみたところきちんと2つ以上表示された

どうすれば各タブ内にも表示させられるのか、教えてください。

###ソースコード

html

1<body> 2 <!--タブ--> 3 <ul class="nav nav-tabs"> 4 <li class="active"><a href="#tab1" data-toggle="tab">タブ1</a></li> 5 <li><a href="#tab2" data-toggle="tab">タブ2</a></li> 6 </ul> 7 <!-- / タブ--> 8 <div id="myTabContent" class="tab-content"> 9 <!-- タブ内のコンテンツ --> 10 <div class="tab-pane fade in active" id="tab1"> 11 <!-- グラフ --> 12 <canvas id="line" height="450" width="600"></canvas> 13 <script> 14 var lineChartData = { 15 labels : ["January","February","March","April","May","June","July"], 16 datasets : [ 17 { 18 fillColor : "rgba(220,220,220,0.5)", 19 strokeColor : "rgba(220,220,220,1)", 20 pointColor : "rgba(220,220,220,1)", 21 pointStrokeColor : "#fff", 22 data : [65,59,90,81,56,55,40] 23 }, 24 { 25 fillColor : "rgba(151,187,205,0.5)", 26 strokeColor : "rgba(151,187,205,1)", 27 pointColor : "rgba(151,187,205,1)", 28 pointStrokeColor : "#fff", 29 data : [28,48,40,19,96,27,100] 30 } 31 ] 32 } 33 var myLine = new Chart(document.getElementById("line").getContext("2d")).Line(lineChartData); 34 </script> 35 </div> 36 <div class="tab-pane fade" id="tab2"> 37 <!-- グラフ --> 38 <canvas id="line_i" height="450" width="600"></canvas> 39 <script> 40 var lineChartData = { 41 labels : ["January","February","March","April","May","June","July"], 42 datasets : [ 43 { 44 fillColor : "rgba(220,220,220,0.5)", 45 strokeColor : "rgba(220,220,220,1)", 46 pointColor : "rgba(220,220,220,1)", 47 pointStrokeColor : "#fff", 48 data : [65,59,90,81,56,55,40] 49 }, 50 { 51 fillColor : "rgba(151,187,205,0.5)", 52 strokeColor : "rgba(151,187,205,1)", 53 pointColor : "rgba(151,187,205,1)", 54 pointStrokeColor : "#fff", 55 data : [28,48,40,19,96,27,100] 56 } 57 ] 58 } 59 var myLine = new Chart(document.getElementById("line_i").getContext("2d")).Line(lineChartData); 60 </script> 61 </div> 62 </div> 63</body>

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

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

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

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

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

guest

回答2

0

ベストアンサー

バグのようですね。タブが表示された後にcanvasを再描写しないと、うまく動作しません。

nnnick/Chart.js/issues/512に修正版のjsfiddleが公開されているので、確認してみてください。

投稿2015/11/11 16:45

編集2015/11/11 16:47
horse_n_deer

総合スコア452

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

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

0

私自身が理解が浅い者ですので、こちらを実践する場合の補足事項を記載させていただきます。
初心者向けとお考えください。

・上記ジャンプ先の記事の、リンク先(http://jsfiddle.net/291w2jLk/)のHTML、JavaScriptは、一度そのままそっくりトレースすることをオススメします。途中まで進めているコードに組み込むと、ハマる可能性があります

・表題を呼び出している場合は、一緒に再描画してあげてください。外に出しているとグラフ全体が表示されないようです

投稿2015/12/20 05:04

編集2015/12/25 21:41
whisper

総合スコア19

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問