解决方案 我的问题是在对 HTML 和 JavaScript 知之甚少的情况下提出的，对此我深表歉意。随着更多的经验，我可以清楚地看到这不是一个好问题，无论如何我的问题的解决方案只是源文件不在相应的库中。
问题是，当我点击 IDE 括号中的“实时预览”时，我可以看到我创建的动态图，但是当我双击 index.html 文件时，它显示了导航栏，但没有动态图表....所以区别是: - 实时预览:显示带有动态图表的导航栏 - 双击 index.html:只显示导航栏而不显示动态图表....?
顺便说一句:我也在本地主机上用 xamp 测试了这个，同样的问题没有动态图表......
这是我的代码:index.html:
<!DOCTYPE html>
<html>
<head>
<!-- Unable to zooming device -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<!-- Initialize jquery -->
<script src="js/jquery-2.1.3.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Link to stylesheet bootstrap.css -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<!--Live Random Data -->
<script type="text/javascript">
window.onload = function () {
var dps = []; // dataPoints
var chart = new CanvasJS.Chart("chartContainer",{
title :{
text: "Live Random Data"
},
data: [{
type: "line",
dataPoints: dps
}]
});
var xVal = 0;
var yVal = 100;
var updateInterval = 20;
var dataLength = 500; // number of dataPoints visible at any point
var updateChart = function (count) {
count = count || 1;
dataPoints.
for (var j = 0; j < count; j++) {
yVal = yVal + Math.round(5 + Math.random() *(-5-5));
dps.push({
x: xVal,
y: yVal
});
xVal++;
};
if (dps.length > dataLength)
{
dps.shift();
}
chart.render();
};
// generates first set of dataPoints
updateChart(dataLength);
// update chart after specified time.
setInterval(function(){updateChart()}, updateInterval);
}
</script>
<script type="text/javascript" src="/canvasjs/canvasjs.min.js"></script>
</head> <!-- End header-->
<body>
<nav class = "navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"> </span>
<span class="icon-bar"></span>
</button>
<a style = "color:red;"class="navbar-brand" href="#">KPEC</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#"><span class="glyphicon glyphicon-home" style="font-size:25px;" aria-hidden="true"></span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-edit" style="font-size:25px;" aria-hidden="true"></span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-stats" style="font-size:25px;" aria-hidden="true"></span></a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-list-alt" style="font-size:25px;" aria-hidden="true"></span></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><span class="glyphicon glyphicon-cog" style="font-size:25px;" aria-hidden="true"></span><span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li class="divider"></li>
<li><a href="#">8</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav><!-- end navbar -->
<!--Window Size Of Realtime Data-->
<div id="chartContainer" style="height: 300px; width:100%;"></div>
</body> <!-- End body-->
</html><!-- End html-->
最佳答案
我认为你的依赖路径不正确，有时你是相对的，有时不是。 试着把绝对的放在相对的？例如替换
<script type="text/javascript" src="/canvasjs/canvasjs.min.js"></script>
到
<script type="text/javascript" src="canvasjs/canvasjs.min.js"></script>
关于javascript - 导入的文件未定义，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29104372/