Chart.js 未显示在在线网站上答案

【问题标题】：Chart.js not showing up on online siteChart.js 未显示在在线网站上
【发布时间】：2018-05-08 09:27:56
【问题描述】：

我真的想不通。

我正在使用 Chart.js - 图表在本地运行良好，但是当我尝试在我的服务器上在线显示它时它不起作用。

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017"],
        datasets: [{
            label: 'Udvikling i motorvejstrafikken 2010-2017',
            data: [100, 103.5, 107.2, 110.3, 115.4, 120.9, 126.3, 131.5],
            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: 4
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    min: 90
                }
            }]
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<canvas id="myChart" width="400px" height="400px"></canvas>

当我在 chrome 中检查控制台时，我收到此错误：tester:890 Uncaught ReferenceError: Chart is not defined at tester:890

我检查了来源，它说这里有一个错误：

var myChart = new Chart(ctx, {

但是是什么导致了这个问题。在本地和 fiddle.net 上运行良好。

希望有人能够帮助我。提前致谢。

【问题讨论】：

您是在顶部还是底部定义脚本（用 sn-p 无法判断）。因为我曾经遇到过这样的问题，即我的脚本标签位于底部和本地，它可以工作，但是当我尝试将它放到网上时却没有。当我将脚本标签放在开头时，它对我来说效果很好。还是您的服务器不允许从互联网上提取您的资源？尝试下载脚本并将它们与您的图表一起在线。因为在我看来，错误似乎是指您的脚本不正确，因为它无法识别 Chart 方法。
好像你的javascript文件 - 你写new Chart(ctx, {的地方在char.js文件的顶部
我在文件顶部定义了我的脚本。通常我们可以从互联网上获取脚本，但我会尝试下载脚本。谢谢。
我尝试下载脚本并将我的文件放到网上。但这也没有用。
@WhiteHat - 不，我不是。 :(

标签： javascript charts chart.js

【解决方案1】：

有点晚了，但我遇到了同样的问题。要修复它，您需要从 window.onload 生成图表。

例如

window.onload = function() {
  var ctx = document.getElementById('myChart').getContext('2d');
  window.myLine = new Chart(ctx, {
      type: 'line',
      data: {
          labels: ["2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017"],
          datasets: [{
              label: 'Udvikling i motorvejstrafikken 2010-2017',
              data: [100, 103.5, 107.2, 110.3, 115.4, 120.9, 126.3, 131.5],
              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: 4
          }]
      },
      options: {
          scales: {
              yAxes: [{
                  ticks: {
                      min: 90
                  }
              }]
          }
      }
  });
};

不知道为什么它在没有这个的情况下在本地工作，但需要这个更改才能显示在服务器上。

【讨论】：