【发布时间】：2020-07-07 13:53:22
【问题描述】：
第一个选项卡正在工作，但其他选项卡只是隐藏了第一个选项卡，但不显示图表。我认为可能存在语法错误。我无法解决这个问题，如果有任何解决方案，我将不胜感激。谢谢。
$(document).ready(function () {
$.ajax({
url: "http://localhost/callerstats.php" ,
method: "GET",
success: function(data) {
console.log(data);
var OriginationName = [];
var Anzahl = [];
for(var i in data) {
OriginationName.push(data[i].OriginationName);
Anzahl.push(data[i].Anzahl);
}
var chartdata = {
labels: OriginationName,
datasets : [
{
label: 'Top 15 Caller Employee',
backgroundColor: 'rgba(200, 200, 200, 0.75)',
borderColor: 'rgba(200, 200, 200, 0.75)',
hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
hoverBorderColor: 'rgba(200, 200, 200, 1)',
data: Anzahl
}
]
};
var ctx = $("#mycanvas1");
var barGraph = new Chart(ctx, {
type: 'horizontalBar',
data: chartdata
});
$('#tab1').hide();
$('#tab1_btn').on('click', function() {
$('#tab1').show();
$('#tab2').hide();
$('#tab3').hide();
$('#tab4').hide();
$('#tab5').hide();
})
},
error: function(data) {
console.log(data);
}
});
});
$(document).ready(function () {
$.ajax({
url: "http://localhost/calledstats.php" ,
method: "GET",
success: function(data) {
console.log(data);
var DestinationName = [];
var Anzahl = [];
for(var i in data) {
DestinationName.push(data[i].DestinationName);
Anzahl.push(data[i].Anzahl);
}
var chartdata = {
labels: DestinationName,
datasets : [
{
label: 'Top 15 Called Employee',
backgroundColor: 'rgba(200, 200, 200, 0.75)',
borderColor: 'rgba(200, 200, 200, 0.75)',
hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
hoverBorderColor: 'rgba(200, 200, 200, 1)',
data: Anzahl
}
]
};
var ctx2 = $("#mycanvas2");
var barGraph2 = new Chart(ctx2, {
type: 'bar',
data: chartdata
});
$('#tab2').hide();
$('#tab2_btn').on('click', function() {
$('#tab1').hide();
$('#tab2').show();
$('#tab3').hide();
$('#tab4').hide();
$('#tab5').hide();
})
},
error: function(data) {
console.log(data);
}
});
});
html - file
<!DOCTYPE html>
<html lang="en">
<head>
<title> Omid Chart </title>
<style type="text/css">
#chart-container1 {
width: 45%;
height: 300px;
display: inline-block;
}
#chart-container2 {
width: 45%;
height: 300px;
display: inline-block;
}
#chart-container3 {
width: 45%;
height: 300px;
display: inline-block;
}
#chart-container4 {
width: 45%;
height: 300px;
display: inline-block;
}
#chart-container5 {
width: 45%;
height: 300px;
display: inline-block;
}
</style>
</head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"</meta>
<button id="tab1_btn">Top 15 Caller Employee</button>
<button id="tab2_btn">Top 15 Called Employee</button>
<button id="tab3_btn">Top Called Filiale</button>
<button id="tab4_btn">Most calls outside of Germany</button>
<button id="tab5_btn">Calls outside of Germany</button>
<div id="tab_cover"> </div>
<div id="tabs">
<div id="tab1" class="tab">
<div id="chart-container1" class="chart_container">
<canvas id="mycanvas1"></canvas>
</div>
<div id="tab2" class="tab">
<div id="chart-container2" class="chart_container">
<canvas id="mycanvas2"></canvas>
</div>
<div id="tab3" class="tab">
<div id="chart-container3" class="chart_container">
<canvas id="mycanvas3"></canvas>
</div>
<div id="tab4" class="tab">
<div id="chart-container4" class="chart_container">
<canvas id="mycanvas4"></canvas>
</div>
<div id="tab5" class="tab">
<div id="chart-container5" class="chart_container">
<canvas id="mycanvas5"></canvas>
</div>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="bar.js"></script>
</body>
</html>
【问题讨论】：
-
如果您只发布代码中的摘录并认为存在语法错误，如果您的大部分代码丢失，那么任何人都如何推断它在哪里？
-
好的，我编辑了我的 html 和 js 文件的其余部分。
-
你能帮帮我吗？我还在努力让它发挥作用。
-
HTML 和 Javascript 是您的确切代码吗？另外 -
bar.js文件中的内容 - 是否相关？ -
您会在您的 HTML 标记中发现几个错误 - 我猜这些标记错误会导致您的 jQuery/Javascript 代码出现问题。通过W3C validator 运行您的HTML 以查看问题。确保您的标记是正确的，如果问题仍然存在，请更新问题并提供一些示例数据
标签： javascript php tabs chart.js show-hide