###前提・実現したいこと
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>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。