允許Chart.js使用jQuery選項卡

在我的頁面上，我有jQuery創建選項卡，並且我有Chart.js創建折線圖。它們都能正常工作，除非我無法讓Chart.js在jQuery選項卡中顯示折線圖。我不明白什麼是jQuery選項卡可能會阻止圖表顯示。允許Chart.js使用jQuery選項卡

我從Chrome中得到的唯一錯誤是「遺漏的類型錯誤：無法調用空的‘的getContext’」指的是線64

如何去使這項工作？

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> 
    <title></title> 
    <meta name="keywords" content="" /> 
    <meta name="description" content="" /> 
    <link href="css/style.css" rel="stylesheet"> 


    <!--Chart.js stuff--> 
    <script src="js/Chart.js"></script> 
    <meta name = "viewport" content = "initial-scale = 1, user-scalable = no"> 
    <style> 
      canvas{ 
      } 
    </style> 

    <!--jQuery/jQuery UI files--> 
    <link href="css/smoothness/jquery-ui-1.10.3.custom.css" rel="stylesheet"> 
    <script src="js/jquery-1.9.1.js"></script> 
    <script src="js/jquery-ui-1.10.3.custom.js"></script> 


    <!--To enable jQuery elements--> 
    <script> 
    $(function() 
    { 
     $("#tabs").tabs(); 

    }); 
    </script> 



</head> 

<body> 
    <script> 
     var lineChartData = { 
      labels : ["January","February","March","April","May","June","July"], 
      datasets : [ 
           { 
             fillColor : "rgba(220,220,220,0.5)", 
             strokeColor : "rgba(220,220,220,1)", 
             pointColor : "rgba(220,220,220,1)", 
             pointStrokeColor : "#fff", 
             data : [65,59,90,81,56,55,40] 
           }, 
           { 
             fillColor : "rgba(151,187,205,0.5)", 
             strokeColor : "rgba(151,187,205,1)", 
             pointColor : "rgba(151,187,205,1)", 
             pointStrokeColor : "#fff", 
             data : [28,48,40,19,96,27,100] 
           } 
         ] 

       } 

     var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData); 

     </script> 
<div class="wrapper"> 

    <div class="middle"> 

     <div class="container"> 
      <main class="content"> 
       <div id="tabs"> 
        <ul> 
         <li><a href="#tabs-1">Tab 1</a></li> 
         <li><a href="#tabs-2">Tab 2</a></li>       

        </ul> 


        <div id="tabs-1"> 
         <!--Trying to display the chart here is not working--> 
         <canvas id="canvas" height="450" width="600"></canvas> 
        </div> 

        <div id="tabs-2"> 
         <p></p> 
        </div> 

       </div> 

      </main><!-- .content --> 
     </div><!-- .container--> 


    </div><!-- .middle--> 

</div><!-- .wrapper --> 

</body> 
</html>

來源

2014-01-13 user9993

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<meta name = "viewport" content = "initial-scale = 1, user-scalable = no"> 
<title>Untitled Document</title> 
<style> 
canvas{ 
     } 
/*** tabs ****/ 
.etabs { margin: 0; 
padding-left:20%; } 

.etabs li 
{display:inline-block; 
width:auto; 
padding:0 3% 2% 3%; 
text-align:center; 

} 
.tab { display: inline-block; 
zoom:1; 
display:inline; 
background:url(../images/li_border.fw.png) no-repeat right; 
height:23px; 

} 
.tab a { font-size: 20px; 
line-height: 2em; 
display: block; 
outline: none; 
color:#D80000; 
font-size:20px; 
text-decoration:none; 
} 
.tab a:hover { text-decoration: none; } 
.tab.active { color:#D80000; 

position: relative; 
border-color: #666; } 

.tab a.active { 
color:#0085B2; } 

.tab-container .panel-container { background: #fff; 
border: solid #666 1px; 
padding: 10px; 
-moz-border-radius: 0 4px 4px 4px; 
-webkit-border-radius: 0 4px 4px 4px; 
} 

/*** tabs ****/ 
</style> 
</head> 

<body> 

<div id="tab-container" class="tab-container"> 
<ul class='etabs'> 
<li class='tab'><a href="#history">Chart</a></li> 
<li class='tab'><a href="#business">Bar chart</a></li> 
</ul> 
<div id="history" class="heig"> 
<h1>bar chart</h1> 
<canvas id="canvas" height="450" width="600"></canvas> 

</div> 
<div id="business" class="heig"> 
<h1>pie chart</h1> 
<canvas id="canvaspie" height="450" width="450"></canvas> 

</div> 
</div> 
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
<script src="jquery.easytabs.js"></script> 
<script src="Chart.js"></script> 
<script> 
$(document).ready(function(){ $('#tab-container').easytabs(); }); 
</script> 
<script> 

var barChartData = { 
labels : ["Pass","Fail"], 
datasets : [ 
{ 
fillColor : "rgba(220,220,220,0.5)", 
strokeColor : "rgba(220,220,220,1)", 
data : [65,0] 
}, 
{ 
fillColor : "rgba(151,187,205,0.5)", 
strokeColor : "rgba(151,187,205,1)", 
data : [0,47] 
} 
] 

} 

var myLine=new  Chart(document.getElementById("canvas").getContext("2d")).Bar(barChartData); 
</script> 
<script> 

var pieData = [ 
      { 
       value: 30, 
       color:"#F38630" 
      }, 
      { 
       value : 50, 
       color : "#E0E4CC" 
      }, 
      { 
       value : 100, 
       color : "#69D2E7" 
      } 

     ]; 

var myPie = new Chart(document.getElementById("canvaspie").getContext("2d")).Pie(pieData); 

</script> 

</body> 
</html>

來源

2014-01-20 08:38:30

這裏這個頁面上我已經使用ETABS jQuery來創建標籤並在標籤內容div中插入畫布標籤。它與chart.js工作正常。 –

我剛剛發佈了一個答案在不同的相關問題，在ChartJS charts not generating within tabs與示例代碼和jsfiddle。我沒有使用jquery.tabs，但是我與自己製作的標籤有同樣的問題。我意識到問題在於顯示：沒有chartjs不知道div的大小來呈現圖表。 ^小提琴實際上使用了兩個修補程序：使用jquery.hide（）/ show（）來代替，並在呈現時臨時隱藏該區域（我發現它在大頁面中是必需的）。

訣竅是在渲染圖表後立即隱藏每個選項卡。再次，使用我自己製作的標籤，但如果您願意調整顯示/隱藏標籤的方式，這也應該解決您的問題。

業務（在jsfiddle完整的代碼）

var ctx = document.getElementById('chart1').getContext('2d'); 
var chart1 = new Chart(ctx).Bar(data1); 
$('#tab1').hide(); 

var ctx = document.getElementById('chart2').getContext('2d'); 
var chart2 = new Chart(ctx).Line(data2); 
$('#tab2').hide(); 

$('#tab1_btn').on('click',function(){ 
    $('#tab1').show(); 
    $('#tab2').hide() 
}) 
$('#tab2_btn').on('click',function(){ 
    $('#tab1').hide(); 
    $('#tab2').show() 
})

來源

2015-04-03 10:23:04 ow3n

這對我的作品。技巧是在選項卡激活時生成圖表。

var chartIsShow = false; 
$(function() { 
    $("#Tabs1").tabs({ 
     activate: function(event, ui) { 
      if(chartIsShow === false) { 
       var ctx = document.getElementById("chart").getContext("2d"); 
       window.myLine = new Chart(ctx).Line(chart_data,{ animation : false, responsive : true }); 
       chartIsShow = true; 
      } 
     } 
    }); 
});

來源

2015-06-16 03:12:13 Daruma

-1

下載定製的jQuery的ui.js文件，並檢查最小的事情（僅標籤），並取消所有其他在http://jqueryui.com/download/，包括這個js文件，而不是你的

來源

2017-06-30 18:33:31 alamnaryab

允許Chart.js使用jQuery選項卡

回答

相關問題