html不工作的内联脚本?

I am trying to recreate a static HTML and bootstrap portfolio into React with components and jsx. The other parts of the code is working great except this part, so I decide to keep that in the HTML, but now its saying chart is not defined. I can see all the texts and background color, except the animation , which is hidden and in console give Chart is not defined

我正在尝试重新创建一个静态HTML和引导组合与组件和jsx的反应。代码的其他部分工作得很好，除了这一部分，所以我决定将它保留在HTML中，但是现在它的表示图没有定义。我可以看到所有的文本和背景颜色，除了动画，这是隐藏的，在控制台给图表没有定义。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Jay chacko </title>

    <!-- Bootstrap core CSS -->
    <link href="../assets/css/bootstrap.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="../assets/css/main.css" rel="stylesheet">

	<link rel="stylesheet" href="../assets/css/font-awesome.min.css">

    <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Raleway:400,300,700' rel='stylesheet' type='text/css'>

    <script type="text/javascript" src="../assets/js/smoothscroll.js"></script>
    <script src="../assets/js/Chart.js"></script>

  </head>
  <body>
    <div id="root"></div>


    	<!--SKILLS DESCRIPTION -->
    	<div id="skillswrap">
    		<div class="container">
    			<div class="row">
    					<div class="col-lg-2 col-lg-offset-1">
    						<h5>SKILLS</h5>
    					</div>
    					<div class="col-lg-3 centered">
    						<canvas id="javascript" height="130" width="130"></canvas>
    						<p>Javascript</p>
    						<br>
    						<script>
    							var doughnutData = [
    									{
    										value: 55,
    										color:"#1abc9c"
    									},
    									{
    										value : 30,
    										color : "#ecf0f1"
    									}
    								];
    								var myDoughnut = new Chart(document.getElementById("javascript").getContext("2d")).Doughnut(doughnutData);
    						</script>
    					</div>
    					<div class="col-lg-3 centered">
    						<canvas id="bootstrap" height="130" width="130"></canvas>
    						<p>Bootstrap</p>
    						<br>
    						<script>
    							var doughnutData = [
    									{
    										value: 80,
    										color:"#1abc9c"
    									},
    									{
    										value : 10,
    										color : "#ecf0f1"
    									}
    								];
    								var myDoughnut = new Chart(document.getElementById("bootstrap").getContext("2d")).Doughnut(doughnutData);
    						</script>
    					</div>
    					<div class="col-lg-3 centered">
    						<canvas id="wordpress" height="130" width="130"></canvas>
    						<p>jQuery</p>
    						<br>
    						<script>
    							var doughnutData = [
    									{
    										value: 40,
    										color:"#1abc9c"
    									},
    									{
    										value : 35,
    										color : "#ecf0f1"
    									}
    								];
    								var myDoughnut = new Chart(document.getElementById("wordpress").getContext("2d")).Doughnut(doughnutData);
    						</script>
    					</div>

    					<div class="col-lg-3 col-lg-offset-3 centered">
    						<canvas id="html" height="130" width="130"></canvas>
    						<p>HTML/CSS</p>
    						<br>
    						<script>
    							var doughnutData = [
    									{
    										value: 95,
    										color:"#1abc9c"
    									},
    									{
    										value : 20,
    										color : "#ecf0f1"
    									}
    								];
    								var myDoughnut = new Chart(document.getElementById("html").getContext("2d")).Doughnut(doughnutData);
    						</script>
    					</div>
    					<div class="col-lg-3 centered">
    						<canvas id="photoshop" height="130" width="130"></canvas>
    						<p>Angular Js</p>
    						<br>
    						<script>
    							var doughnutData = [
    									{
    										value: 65,
    										color:"#1abc9c"
    									},
    									{
    										value : 30,
    										color : "#ecf0f1"
    									}
    								];
    								var myDoughnut = new Chart(document.getElementById("photoshop").getContext("2d")).Doughnut(doughnutData);
    						</script>
    					</div>
    					<div class="col-lg-3 centered">
    						<canvas id="illustrator" height="130" width="130"></canvas>
    						<p>React</p>
    						<br>
    						<script>
    							var doughnutData = [
    									{
    										value: 50,
    										color:"#1abc9c"
    									},
    									{
    										value : 50,
    										color : "#ecf0f1"
    									}
    								];
    								var myDoughnut = new Chart(document.getElementById("illustrator").getContext("2d")).Doughnut(doughnutData);
    						</script>
    					</div>
    <p>Other Skills - UNIX Commands, NPM, Gulp, bower packages, Web packs </p>
    <p>Other Soft Skills - NOSQL,MYSQL, Node JS </p>
    <p>Other Softer Skills - C#, Java, Objective C, MYSQL, PHP, Python </p>


    			</div>
    			<br>
    		</div>
    	</div>




    <script src="../assets/js/jquery.min.js"></script>
    <script src="../assets/js/bootstrap.js"></script>

  </body>
</html>

1 个解决方案

#1

It may caused by loading ../assets/js/Chart.js by browser asynchronously.

它可能是由加载…/资产/js/图表引起的。异步js的浏览器。

Try adding a console.log(Chart) in the beginning of your code (after loading Chart.js file) and see if it prints in console.

在代码开始时(在加载图表后)添加一个console.log(图表)。(js文件)，看看它是否在控制台打印。

If it exist then it's not an issue with loading it in first place. (And this answer may not help you)

如果它存在，那么它就不是第一个加载它的问题。(这个回答可能对你没有帮助)

If it shows undefined, type Chart in your browser console and see if it loaded now asynchronous and defined. If it show up, you have to make sure Chart is loaded then run your code.

如果它在您的浏览器控制台中显示未定义的类型图表，并查看它是否已经加载了异步和定义。如果它出现了，您必须确保加载了图表，然后运行您的代码。

#1