导入的文件未定义

Imported file is undefined

本文关键字：未定义 文件 导入      更新时间：2023-09-26

解决方案我的问题是在对HTML和JavaScript知之甚少的情况下提出的，对此我深表歉意。随着经验的积累，我可以清楚地看到这不是一个好问题，无论如何，我的问题的解决方案只是源文件不在相应的库中。

问题是，当我

单击括号中的"实时预览"时 IDE，我可以看到我创建的动态图，但是当我双击索引.html文件时，它显示的是导航栏，而不是动态图表。所以区别在于：- 实时Priview：显示带有动态图表的导航栏- 双击索引.html：只显示导航栏而不显示动态图表....？

顺便说一句：我也用 xamp 在本地主机中对此进行了测试，同样的问题没有动态图表......

这是我的代码：索引.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>
相关文章：