Javascript 允许Chart.js使用jQuery选项卡
在我的页面上，我有jQuery创建选项卡，我有Chart.js创建折线图。它们都工作得很好，只是我不能让Chart.js在jQuery选项卡中显示折线图。我不明白jQuery选项卡会阻止图表显示的原因 我从Chrome中得到的唯一错误是参考第64行的“UncaughtTypeError:无法调用null的方法'getContext' 我该如何着手使这项工作Javascript 允许Chart.js使用jQuery选项卡,javascript,jquery,jquery-ui,charts,chart.js,Javascript,Jquery,Jquery Ui,Charts,Chart.js,在我的页面上，我有jQuery创建选项卡，我有Chart.js创建折线图。它们都工作得很好，只是我不能让Chart.js在jQuery选项卡中显示折线图。我不明白jQuery选项卡会阻止图表显示的原因 我从Chrome中得到的唯一错误是参考第64行的“UncaughtTypeError:无法调用null的方法'getContext' 我该如何着手使这项工作 <!DOCTYPE html> <html> <head> <meta charset="
<!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>
帆布{
}
$（函数（）
{
$（“#制表符”）.tabs（）；
});
变量lineChartData={
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
数据集：[
{
填充颜色：“rgba（220220,0.5）”，
strokeColor:“rgba（2201）”，
点颜色：“rgba（220220,1）”，
pointStrokeColor:“fff”，
数据：[65,59,90,81,56,55,40]
},
{
填充颜色：“rgba（151187205,0.5）”，
strokeColor:“rgba（151187205,1）”，
点颜色：“rgba（151187205,1）”，
pointStrokeColor:“fff”，
数据：[28,48,40,19,96,27100]
}
]
}
var myLine=新图表（document.getElementById（“canvas”）.getContext（“2d”））.Line（lineChartData）；
无标题文件
帆布{
}
/***标签****/
.etabs{保证金：0；
左侧填充：20%；}
李先生
{显示：内联块；
宽度：自动；
填充：03%2%3%；
文本对齐：居中；
}
.tab{显示：内联块；
缩放：1；
显示：内联；
背景：url（../images/li_border.fw.png）无重复权限；
高度：23px；
}
.tab a{字体大小：20px；
线高：2米；
显示：块；
大纲：无；
颜色：#D80000；
字体大小：20px；
文字装饰：无；
}
.tab a:悬停{文本装饰：无；}
.tab.active{color:#D80000；
位置：相对位置；
边框颜色：#666；}
.tab a.active{
颜色：#0085B2；}
.tab容器.panel容器{背景：#fff；
边框：实心#666 1px；
填充：10px；
-moz边界半径：0 4px 4px 4px；
-webkit边界半径：0 4px 4px 4px；
}
/***标签****/
条形图
饼图
$（document）.ready（function（）{$（'#tab container'）.easytabs（）；}）；
var barChartData={
标签：[“通过”、“失败”]，
数据集：[
{
填充颜色：“rgba（220220,0.5）”，
strokeColor:“rgba（2201）”，
数据：[65,0]
},
{
填充颜色：“rgba（151187205,0.5）”，
strokeColor:“rgba（151187205,1）”，
数据：[0,47]
}
]
}
var myLine=新图表（document.getElementById（“canvas”）.getContext（“2d”））.Bar（barChartData）；
变量数据=[
{
数值：30，
颜色：“F38630”
},
{
价值：50，
颜色：“E0E4CC”
},
{
数值：100，
颜色：“69D2E7”
}
];
var myPie=新图表（document.getElementById（“canvaspie”）.getContext（“2d”））.Pie（pieData）；
这对我有用。诀窍是在选项卡激活时生成图表
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;
}
}
});
});
下载定制的jquery-ui.js文件，选中最小值（仅选项卡），取消选中所有其他at，并在此页面上包含此js文件而不是您的文件这里我使用etabs jquery创建选项卡并在tab content div中插入画布标记。它与chart.js配合良好。
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()
})
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;
}
}
});
});