Question

我的代码在Codepen中可以正常工作，但是一旦我开始在本地使用它，我总是收到“未声明图表错误”的信息。不知道它是我的HTML结构还是Javascript。 Codepen JS似乎没有出现问题的迹象。

JS：

var canvas = document.getElementById("barChart");
var ctx = canvas.getContext('2d');


Chart.defaults.global.defaultFontColor = 'dodgerblue';
Chart.defaults.global.defaultFontSize = 16;

var data = {
labels: ["Vanilla", "Chocolate", "Strawberry","Carmel", "Tripple 
Chocolate"],
  datasets: [
    {
        label: "Ice Cream Sales ",
        fill: true,
        backgroundColor: [
            'moccasin',
            'saddlebrown',
            'lightpink',
            'gold',
            'saddlebrown'],
        data: [15, 14, 10, 6, 2]
    }
 ]
};

var options = {
    title: {
              display: true,
              text: 'Items Sold',
              position: 'bottom'
          },
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true
            }
        }]
    }
};
 var myBarChart = new Chart(ctx, {
 type: 'bar',
 data: data,
 options: options
 });

HTML：

<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<head>
<link rel="stylesheet" href="graph1.css" type="text/css">
</head>
<body>
<div class="container">
<br />
<div class="row">
  <div class="col-md-1"></div>
  <div class="col-md-10">
    <canvas id="barChart"></canvas>
   </div>
   <div class="col-md-1"></div>
   </div>
   </div>
   <script src="graph1.js"></script>
   </body>

   </html>

Codepen链接：https://codepen.io/ksav22/pen/dLmdqM

Answer 1

这是因为在Codepen中，您已附加了此脚本（“打开JS设置”模态）：

https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js

没有它，Chart 是未定义。

您需要在HTML中（并且在使用Chart编写自己的脚本之前）链接到它。

Answer 2

在执行JS代码之前，您还需要等待所有文件加载完毕。您的所有过程代码都应位于document.addEventListener("DOMContentLoaded", function(event) {});匿名函数中。否则，如果在加载chart.js之前加载了脚本，则会显示“图表未定义”，因为尚未加载！

但是，您的用户定义函数和全局变量声明应在document.addEventListener("DOMContentLoaded", function(event) {});函数之外。

“未声明图表错误”我的代码在Codepen中运行正常，但是在本地运行时，我不断收到错误消息

2 个答案: