试图使用jquery加载外部html文件，但这些文件中的javascript不是'；你不跑步吗？
因此，我有一个index.html（名称混淆为aaa等）。它创建4个标签-主页、aaa、bbb、ccc。单击每个aaa、bbb、ccc选项卡时，您的想法是将带有chart.js图形的外部html文件加载到选项卡下方的mychart对象中 然而，虽然每个单独的页面都可以单独呈现，但当它们位于被拉入的div中时，它肯定不起作用。有时，第一个选项卡（aaa）将工作并显示图形，但在其他选项卡中，bbb.html等中的javascript似乎没有被调用-我尝试将console.logs放入其中，但没有成功 如果有人能看到我遗漏了什么，我将不胜感激试图使用jquery加载外部html文件，但这些文件中的javascript不是'；你不跑步吗？,javascript,html,jquery,Javascript,Html,Jquery,因此，我有一个index.html（名称混淆为aaa等）。它创建4个标签-主页、aaa、bbb、ccc。单击每个aaa、bbb、ccc选项卡时，您的想法是将带有chart.js图形的外部html文件加载到选项卡下方的mychart对象中 然而，虽然每个单独的页面都可以单独呈现，但当它们位于被拉入的div中时，它肯定不起作用。有时，第一个选项卡（aaa）将工作并显示图形，但在其他选项卡中，bbb.html等中的javascript似乎没有被调用-我尝试将console.logs放入其中，但没有成功
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready( function() {
$("#aaa").load("aaa.html");
$("#bbb").load("bbb.html");
$("#ccc").load("ccc.html");
});
</script>
<body>
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#home">Home</a></li>
<li><a data-toggle="pill" href="#aaa">aaa</a></li>
<li><a data-toggle="pill" href="#bbb">bbb</a></li>
<li><a data-toggle="pill" href="#ccc">ccc</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>Daily graphs</h3>
</div>
<div id="aaa" class="tab-pane fade">
<h3>aaa</h3>
</div>
<div id="bbb" class="tab-pane fade">
<h3>bbb</h3>
</div>
<div id="ccc" class="tab-pane fade">
<h3>ccc</h3>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>bbb chart </title>
</head>
<style>
.container {
width: 100%;
height: 100%;
}
</style>
<body onload="render();">
<div class="container">
<canvas id="myChart"></canvas>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="./bbb.js"></script>
</html>
function renderChart(data, labels) {
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
stack: "statistics",
label: 'Errors',
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgb(255, 99, 132)',
data: dataErrors,
},
{
stack: "statistics",
label: "Warnings",
borderColor: 'rgb(54, 162, 235)',
backgroundColor: 'rgba(54, 162, 235)',
data:dataWarnings,
},
{
stack: "statistics",
label: "Weak Warnings",
borderColor: 'rgb(75, 192, 192)',
backgroundColor: 'rgb(75, 192, 192)',
data:dataWeakWarnings,
},
{
stack: "statistics",
label: "Informations",
borderColor: 'rgb(86, 205, 255)',
backgroundColor: 'rgb(86, 205, 255)',
data:dataInformations,
},
{
stack: "statistics",
label: "Typos",
borderColor: 'rgb(255, 205, 86)',
backgroundColor: 'rgb(255, 205, 86)',
data:dataTypos,
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'Chart'
},
scales: {
xAxes: [{
stacked: true,
scaleLabel: {
display: true,
labelString: 'Date'
}
}],
yAxes: [{
stacked: true,
scaleLabel: {
display: true,
labelString: 'Issues'
}
}]
},
}
});
}
function render() {
dataErrors = [ 194, 194, 194, 194, 194, 194, 194]; dataWarnings = [ 9250, 9250, 9250, 9250, 9250, 9255, 9256]; dataWeakWarnings = [ 3525, 3523, 3524, 3524, 3524, 3527, 3527]; dataInformations = [ 7, 7, 7, 7, 7, 7, 7]; dataTypos = [ 12118, 11956, 12294, 11453, 11664, 11722, 12068]; labels = [" 16/10/2020", "17/10/2020", "18/10/2020", "19/10/2020", "20/10/2020", "21/10/2020", "22/10/2020"];
renderChart(dataWarnings, labels);
};