Question

解决方案 我的问题是在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-->

Answer 1

我认为你的依赖关系的路径是不正确的，有时你有相对的，有时不是。试着把绝对一个放在亲戚身上？例如，替换

<script type="text/javascript" src="/canvasjs/canvasjs.min.js"></script>

到

<script type="text/javascript" src="canvasjs/canvasjs.min.js"></script>

导入的文件未定义

1 个答案: