Fatal编程技术网
  • javascript/
  • Javascript &引用；图表isn'；t声明错误“；我的代码在Codepen中工作得很好，但是在本地运行时，我总是会遇到错误

Javascript &引用；图表isn'；t声明错误“；我的代码在Codepen中工作得很好，但是在本地运行时，我总是会遇到错误

javascript html

Javascript &引用；图表isn'；t声明错误“；我的代码在Codepen中工作得很好，但是在本地运行时，我总是会遇到错误,javascript,html,Javascript,Html,我的代码在Codepen中工作得非常好，但一旦我开始在本地使用它，我就会得到一个“图表未声明错误”。不确定是我的HTML结构还是Javascript。Codepen JS似乎没有显示出问题的迹象 JS: HTML: 代码笔链接：这是因为在代码笔中，您附加了此脚本（“打开JS设置”模式）： 没有它，图表是未定义的 您需要在HTML中链接到它（在使用图表编写自己的脚本之前）。这是因为在codepen中，您附加了此脚本（“打开JS设置”模式）： 没有它，图表是未定义的 您需要在HTML中链接到它

我的代码在Codepen中工作得非常好，但一旦我开始在本地使用它，我就会得到一个“图表未声明错误”。不确定是我的HTML结构还是Javascript。Codepen JS似乎没有显示出问题的迹象

JS:

HTML:
代码笔链接：

这是因为在代码笔中，您附加了此脚本（“打开JS设置”模式）：

没有它，
图表
是未定义的

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

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

没有它，
图表
是未定义的

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

您还需要等到所有文件都加载完毕后再执行JS代码。所有过程代码都应该在
文档中。addEventListener（“DOMContentLoaded”，function（event）{}）匿名函数。否则，如果在加载chart.js之前加载了脚本，它会说“chart未定义”，因为它尚未加载


用户定义的函数和全局变量声明应该在
文档的外部函数。
在执行JS代码之前，您还需要等待所有文件加载完毕。所有过程代码都应该在
文档中。addEventListener（“DOMContentLoaded”，function（event）{}）匿名函数。否则，如果在加载chart.js之前加载了脚本，它会说“chart未定义”，因为它尚未加载

用户定义的函数和全局变量声明应该在
文档的外部函数


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
 });



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



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