1
我想重新创建一个静态HTML和引导组合到与组件和jsx的React。代码的其他部分除了这部分以外工作得很好，所以我决定将它保留在HTML中，但现在它的图表没有定义。我可以看到所有的文字和背景颜色，除了动画，这是隐藏在控制台给图没有定义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">
\t <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>
\t <!--SKILLS DESCRIPTION -->
\t <div id="skillswrap">
\t \t <div class="container">
\t \t \t <div class="row">
\t \t \t \t \t <div class="col-lg-2 col-lg-offset-1">
\t \t \t \t \t \t <h5>SKILLS</h5>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="col-lg-3 centered">
\t \t \t \t \t \t <canvas id="javascript" height="130" width="130"></canvas>
\t \t \t \t \t \t <p>Javascript</p>
\t \t \t \t \t \t <br>
\t \t \t \t \t \t <script>
\t \t \t \t \t \t \t var doughnutData = [
\t \t \t \t \t \t \t \t \t {
\t \t \t \t \t \t \t \t \t \t value: 55,
\t \t \t \t \t \t \t \t \t \t color:"#1abc9c"
\t \t \t \t \t \t \t \t \t },
\t \t \t \t \t \t \t \t \t {
\t \t \t \t \t \t \t \t \t \t value : 30,
\t \t \t \t \t \t \t \t \t \t color : "#ecf0f1"
\t \t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t \t ];
\t \t \t \t \t \t \t \t var myDoughnut = new Chart(document.getElementById("javascript").getContext("2d")).Doughnut(doughnutData);
\t \t \t \t \t \t </script>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="col-lg-3 centered">
\t \t \t \t \t \t <canvas id="bootstrap" height="130" width="130"></canvas>
\t \t \t \t \t \t <p>Bootstrap</p>
\t \t \t \t \t \t <br>
\t \t \t \t \t \t <script>
\t \t \t \t \t \t \t var doughnutData = [
\t \t \t \t \t \t \t \t \t {
\t \t \t \t \t \t \t \t \t \t value: 80,
\t \t \t \t \t \t \t \t \t \t color:"#1abc9c"
\t \t \t \t \t \t \t \t \t },
\t \t \t \t \t \t \t \t \t {
\t \t \t \t \t \t \t \t \t \t value : 10,
\t \t \t \t \t \t \t \t \t \t color : "#ecf0f1"
\t \t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t \t ];
\t \t \t \t \t \t \t \t var myDoughnut = new Chart(document.getElementById("bootstrap").getContext("2d")).Doughnut(doughnutData);
\t \t \t \t \t \t </script>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="col-lg-3 centered">
\t \t \t \t \t \t <canvas id="wordpress" height="130" width="130"></canvas>
\t \t \t \t \t \t <p>jQuery</p>
\t \t \t \t \t \t <br>
\t \t \t \t \t \t <script>
\t \t \t \t \t \t \t var doughnutData = [
\t \t \t \t \t \t \t \t \t {
\t \t \t \t \t \t \t \t \t \t value: 40,
\t \t \t \t \t \t \t \t \t \t color:"#1abc9c"
\t \t \t \t \t \t \t \t \t },
\t \t \t \t \t \t \t \t \t {
\t \t \t \t \t \t \t \t \t \t value : 35,
\t \t \t \t \t \t \t \t \t \t color : "#ecf0f1"
\t \t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t \t ];
\t \t \t \t \t \t \t \t var myDoughnut = new Chart(document.getElementById("wordpress").getContext("2d")).Doughnut(doughnutData);
\t \t \t \t \t \t </script>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="col-lg-3 col-lg-offset-3 centered">
\t \t \t \t \t \t <canvas id="html" height="130" width="130"></canvas>
\t \t \t \t \t \t <p>HTML/CSS</p>
\t \t \t \t \t \t <br>
\t \t \t \t \t \t <script>
\t \t \t \t \t \t \t var doughnutData = [
\t \t \t \t \t \t \t \t \t {
\t \t \t \t \t \t \t \t \t \t value: 95,
\t \t \t \t \t \t \t \t \t \t color:"#1abc9c"
\t \t \t \t \t \t \t \t \t },
\t \t \t \t \t \t \t \t \t {
\t \t \t \t \t \t \t \t \t \t value : 20,
\t \t \t \t \t \t \t \t \t \t color : "#ecf0f1"
\t \t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t \t ];
\t \t \t \t \t \t \t \t var myDoughnut = new Chart(document.getElementById("html").getContext("2d")).Doughnut(doughnutData);
\t \t \t \t \t \t </script>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="col-lg-3 centered">
\t \t \t \t \t \t <canvas id="photoshop" height="130" width="130"></canvas>
\t \t \t \t \t \t <p>Angular Js</p>
\t \t \t \t \t \t <br>
\t \t \t \t \t \t <script>
\t \t \t \t \t \t \t var doughnutData = [
\t \t \t \t \t \t \t \t \t {
\t \t \t \t \t \t \t \t \t \t value: 65,
\t \t \t \t \t \t \t \t \t \t color:"#1abc9c"
\t \t \t \t \t \t \t \t \t },
\t \t \t \t \t \t \t \t \t {
\t \t \t \t \t \t \t \t \t \t value : 30,
\t \t \t \t \t \t \t \t \t \t color : "#ecf0f1"
\t \t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t \t ];
\t \t \t \t \t \t \t \t var myDoughnut = new Chart(document.getElementById("photoshop").getContext("2d")).Doughnut(doughnutData);
\t \t \t \t \t \t </script>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="col-lg-3 centered">
\t \t \t \t \t \t <canvas id="illustrator" height="130" width="130"></canvas>
\t \t \t \t \t \t <p>React</p>
\t \t \t \t \t \t <br>
\t \t \t \t \t \t <script>
\t \t \t \t \t \t \t var doughnutData = [
\t \t \t \t \t \t \t \t \t {
\t \t \t \t \t \t \t \t \t \t value: 50,
\t \t \t \t \t \t \t \t \t \t color:"#1abc9c"
\t \t \t \t \t \t \t \t \t },
\t \t \t \t \t \t \t \t \t {
\t \t \t \t \t \t \t \t \t \t value : 50,
\t \t \t \t \t \t \t \t \t \t color : "#ecf0f1"
\t \t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t \t ];
\t \t \t \t \t \t \t \t var myDoughnut = new Chart(document.getElementById("illustrator").getContext("2d")).Doughnut(doughnutData);
\t \t \t \t \t \t </script>
\t \t \t \t \t </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>
\t \t \t </div>
\t \t \t <br>
\t \t </div>
\t </div>
<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/bootstrap.js"></script>
</body>
</html>
这是说没有定义。如果你不介意看看它https://www.dropbox.com/s/552xpfs3ubggrmd/portfolio.rar?dl=0 –