ReferenceError：图表未定义 - chartjs答案

【问题标题】：ReferenceError: Chart is not defined - chartjsReferenceError：图表未定义 - chartjs
【发布时间】：2015-06-29 09:44:45
【问题描述】：

Chart.js 有错误吗？每次我将 Chart.js 中的任何图表添加到我的网站时，都会出现错误，但是当我将该图表用作独立程序时，它可以顺利运行而没有错误。我正在使用 HTML5。

   <html>
   <head>
      <meta charset="utf-8" />
      <title>Rice Consumption</title>
      <script src='Chart.min.js'></script>
    </head>
    <body>

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

      <script>
        var riceData = {
        labels : ["January","February","March","April","May","June"],
        datasets :
         [
            {
              fillColor : "rgba(172,194,132,0.4)",
              strokeColor : "#ACC26D",
              pointColor : "#fff",
              pointStrokeColor : "#9DB86D",
              data : [203000,15600,99000,25100,30500,24700]
            }
         ]
        }

          var rice = document.getElementById('rice').getContext('2d');
               new Chart(rice).Line(riceData);
    </script>
    </body>
    </html>

已解决：我刚刚将脚本与画布元素分离（为脚本创建了另一个文件以执行其功能）。

更新的 HTML：

      <html>
      <head>
      <meta charset="utf-8" />
      <title>Rice Consumption</title>
      <script src='Chart.min.js'></script>
      </head>
      <body>
      <canvas id="rice" width="600" height="400"></canvas>
      <script src='Chart.min.js'></script>
      <script src='rice.js'></script>
      </body>
      </html>

新的 JavaScript 文件：

var riceData = {
    labels : ["January","February","March","April","May","June"],
    datasets : [
        {
            fillColor : "rgba(172,194,132,0.4)",
            strokeColor : "#ACC26D",
            pointColor : "#fff",
            pointStrokeColor : "#9DB86D",
            data : [203000,15600,99000,25100,30500,24700]
        }
    ]
}

var rice = document.getElementById('rice').getContext('2d');
new Chart(rice).Line(riceData);

【问题讨论】：

请添加一些关于您如何准确链接 ChartJS 的详细信息。 <script> 标签在哪里？
谢谢！这看起来很奇怪，确实……
“Chart.min.js”是否与 HTML 位于同一文件夹中？
包含正确类型的 JS。你的控制台显示什么？您的 Chart.min.js 文件中有任何 404 吗？
@SamiX <script> 标签上的 type 属性是可选的。应该没关系。

标签： javascript html html5-canvas chart.js

【解决方案1】：

我也遇到了同样的错误。为了解决这个问题，我将图表脚本移动到单独的 graph.js 文件中。

我仍然遇到同样的错误。当我在标签结束之前按以下顺序放置标签时，稍后会修复此问题，如下所示。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script type="text/javascript" src="jscript/graph.js"></script>
</body>

页面如下所示：

var ctx = document.getElementById("myChart").getContext('2d');
  var myChart = new Chart(ctx, {
      type: 'bar',
      data: {
          labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
          datasets: [{
              label: '# of Votes',
              data: [12, 19, 3, 5, 2, 3],
              backgroundColor: [
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)',
                  'rgba(75, 192, 192, 0.2)',
                  'rgba(153, 102, 255, 0.2)',
                  'rgba(255, 159, 64, 0.2)'
              ],
              borderColor: [
                  'rgba(255,99,132,1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)'
              ],
              borderWidth: 1
          }]
      },
      options: {
          scales: {
              yAxes: [{
                  ticks: {
                      beginAtZero:true
                  }
              }]
          }
      }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<!DOCTYPE html>

<canvas id="myChart"></canvas>

【讨论】：

【解决方案2】：

这是您的代码的工作 jsfiddle：
new Chart(rice).Line(riceData);
http://jsfiddle.net/mahmalsami/jqcthmyo/
所以问题肯定来自您的外部 Chart.min.js 包含

你可能会在你的 js get 上找到一个 404。请确保您链接到正确的 js 文件夹。（尝试访问您的 localhost/Chart.min.js 以查看是否可以访问您的文件）

【讨论】：

我使用过，这个标签似乎被禁用了。您能否建议我启用它的任何想法？
@FRECEENAFRANCIS，例如使用你的

【解决方案3】：

我遇到了同样的错误。要解决此问题，您必须正确包含 chart.js 库，如下所示：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>

【讨论】：

【解决方案4】：

1) 我试过从Chartjs.org 下载的Chart.js。但是，它不起作用。

2) 试试这个。

<script type="text/javascript" src="http://www.chartjs.org/assets/Chart.js">
</script>

工作良好。

【讨论】：

添加它的新方法是通过 CDN：

【解决方案5】：

如果您像我一样在 Ruby on Rails 5 上间歇性地看到此问题，则问题与我禁用的 Turbolinks 有关。现在效果很好！

【讨论】：

【解决方案6】：

已经用 Chartjs 两次遇到这个问题，并通过使用 setTimeout 来延迟导致错误的函数的调用来解决。

【讨论】：

虽然这可能有效，但它并不是一个强大的解决方案 - 更改各种代码所需的时间可能会导致它停止工作。

【解决方案7】：

这是一个非常基本的错误，应该在文档一开始就注意它。确保您正确安装了 chartjs 库，无论您是否想要它，如 cdn/npm pacakge 等。遵循文档：https://www.chartjs.org/docs/latest/getting-started/installation.html

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案8】：

将<script src='Chart.min.js'></script> 更改为<script src='chart.min.js'> 并将文件夹中 Chart.min.js 的名称更改为 chart.min.js

【讨论】：