Question

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

＆＃13;

<!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>

＆＃13;

Answer 1

可能是由浏览器异步加载../assets/js/Chart.js造成的。

尝试在代码的开头添加console.log(Chart)（在加载Chart.js文件后）并查看它是否在控制台中打印。

如果它存在，那么首先加载它不是问题。（这个答案对你有帮助）

如果显示undefined，请在浏览器控制台中键入Chart，然后查看它是否已异步加载并已定义。如果它出现，你必须确保加载图表然后运行你的代码。

html上的内联脚本不起作用？

1 个答案: