Question

我想知道我的项目中存在奇怪的问题。我尝试在我的index.jade文件中显示Google图表，但遗憾的是我不想为我工作，除非我要删除，添加哪个加载zone.js.所以有两个愚蠢的问题。

第一：它为什么会发生？第二个：如何解决？

doctype html
html(lang='en').
  <head>

    <!--Load the AJAX API-->
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
      <script type="text/javascript">

        // Load the Visualization API and the corechart package.
        google.charts.load('current', {'packages':['corechart']});

        // Set a callback to run when the Google Visualization API is loaded.
        google.charts.setOnLoadCallback(drawChart);

        // Callback that creates and populates a data table,
        // instantiates the pie chart, passes in the data and
        // draws it.
        function drawChart() {

          // Create the data table.
          var data = new google.visualization.DataTable();
          data.addColumn('string', 'Topping');
          data.addColumn('number', 'Slices');
          data.addRows([
            ['Mushrooms', 3],
            ['Onions', 1],
            ['Olives', 1],
            ['Zucchini', 1],
            ['Pepperoni', 2]
          ]);

          // Set chart options
          var options = {'title':'How Much Pizza I Ate Last Night',
                        'width':400,
                        'height':300};

          // Instantiate and draw our chart, passing in some options.
          var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
          chart.draw(data, options);
        }
      </script>

      <base href="/">
      <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags-->
      <meta name="description" content="">
      <meta name="author" content="">
      <link rel="icon" href="../../favicon.ico">
      <title>Navbar Template for Bootstrap</title>
      <!-- Custom styles for this template-->
      <!-- 1. Load libraries-->
      <!-- Polyfill(s) for older browsers-->
      <script src="node_modules/core-js/client/shim.min.js"></script>
      <script src="node_modules/zone.js/dist/zone.js"></script>
      <script src="node_modules/reflect-metadata/Reflect.js"></script>
      <script src="node_modules/systemjs/dist/system.src.js"></script>
      <!-- 2. Configure SystemJS-->
      <script src="systemjs.config.js"></script>

      <script>
        System.import('app').catch(function(err){ console.error(err) })
      </script>

    </head>
    <body>
     <div id="chart_div"></div>
      <div class="container">
        <app>Loading...</app>
      </div>
      <!-- /container-->
      <!--
      Bootstrap core JavaScript
      script(src='https://code.jquery.com/jquery-3.1.0.min.js')
      ==================================================
      -->
      <!-- Placed at the end of the document so the pages load faster-->
      <script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
      <script type="text/javascript" src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
      <script type="text/javascript" src="javascripts/facebook/facebook.js"></script>
    </body>
  </html>

谷歌图表不起作用

0 个答案: