Chart.js가 jQuery 탭과 함께 작동하도록 허용

내 페이지에서 jQuery가 탭을 만들고 Chart.js에 꺾은 선형 차트가 있습니다. Chart.js가 jQuery 탭 안에 꺾은 선형 차트를 표시하도록 할 수 없다는 점을 제외하고는 모두 잘 동작합니다. 차트를 표시하지 못하게 할 수있는 jQuery 탭에 대해 이해하지 못합니다.Chart.js가 jQuery 탭과 함께 작동하도록 허용

내가 크롬에서 얻을 수있는 유일한 오류가 "catch되지 않은 형식 오류 : 널 (null)의 '는 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

여기이 페이지에 대신 당신의 파일 JS 포함 탭 콘텐츠 div에 탭 및 삽입 된 캔버스 태그를 작성하십시오. 그것은 chart.js와 잘 작동합니다. –

난 그냥 예제 코드 및 jsfiddle와 ChartJS charts not generating within tabs의 다른 관련 질문에 답변을 기록했다. jquery.tabs를 사용하지 않지만 탭으로 동일한 문제가 발생했습니다. 차트에 렌더링 할 div의 크기를 알 수없는 chartjs는 없습니다.^바이올린은 실제로 두 개의 픽스를 사용합니다 : 대신 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/ 다른 모든 선택을 취소하고이 내가 ETABS JQuery와에 사용한

출처

2017-06-30 18:33:31 alamnaryab

Chart.js가 jQuery 탭과 함께 작동하도록 허용

답변

관련 문제