Chart.js запускается в JSFiddle, но не локально: «Диаграмма не определена»

javascript jquery html canvas chart.js

504 просмотра

1 ответ

Я начал разрабатывать свой первый сайт. Когда я пытаюсь реализовать файл chart.js в скобках, я всегда получаю «ReferenceError:« Диаграмма не определена »в моей Firefox-консоли. Если я копирую его в JSFiddle, он работает. Спасибо за помощь!

<head> 
</head>

<body>
<script src="js/jquery.js"></script>`
<script scr="Chart.min.js"> </script>  `

<canvas id="canvas" width="400" height="400"></canvas>

<script>

var data = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
    {
        fillColor : "rgba(220,220,220,0.5)",
        strokeColor : "rgba(220,220,220,1)",
        data : [65,59,90,81,56,55,40]
    },
    {
        fillColor : "rgba(151,187,205,0.5)",
        strokeColor : "rgba(151,187,205,1)",
        data : [28,48,40,19,96,27,100]
    }
   ]
   }


var ctx = $("#canvas")[0].getContext("2d");
var TestChart = new Chart(ctx).Bar(data);
new Chart(ctx).Bar(data);

</script>
</body>
Автор: Henning Источник Размещён: 08.11.2019 11:27

Ответы (1)


1 плюс

Решение

В вашем коде есть опечатка:

<script scr="Chart.min.js"></script> 

должно быть:

<script src="Chart.min.js"></script> 

Попробуйте изменить свой код следующим образом:

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js">
  </script>
</head>

<body>
  `

  <canvas id="canvas" width="400" height="400"></canvas>

  <script>
    var data = {
      labels: ["January", "February", "March", "April", "May", "June", "July"],
      datasets: [{
        fillColor: "rgba(220,220,220,0.5)",
        strokeColor: "rgba(220,220,220,1)",
        data: [65, 59, 90, 81, 56, 55, 40]
      }, {
        fillColor: "rgba(151,187,205,0.5)",
        strokeColor: "rgba(151,187,205,1)",
        data: [28, 48, 40, 19, 96, 27, 100]
      }]
    }


    var ctx = $("#canvas")[0].getContext("2d");
    var TestChart = new Chart(ctx).Bar(data);
    new Chart(ctx).Bar(data);
  </script>
</body>
</html>

Автор: Hardy Размещён: 20.08.2016 02:59
Вопросы из категории :
32x32