“未聲明圖表錯誤”我的代碼在Codepen中運行正常，但是在本地運行時，我不斷收到錯誤消息

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 個解決方案

解決方案1
2 已采納 2019-04-18 13:58:26

解決方案2
0 2019-04-18 14:09:15

“未聲明圖表錯誤”我的代碼在Codepen中運行正常，但是在本地運行時，我不斷收到錯誤消息

問題描述

2 個解決方案

解決方案1 2 已采納 2019-04-18 13:58:26

解決方案2 0 2019-04-18 14:09:15

解決方案1
2 已采納 2019-04-18 13:58:26

解決方案2
0 2019-04-18 14:09:15