ReferenceError:图表未定义 - chartjs

2022-01-17 00:00:00 javascript html chart.js html5-canvas

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

Is there a bug with Chart.js? Every time I add any of the graphs at Chart.js to my website I get an error, but when I used the graph as stand-alone program it runs smoothly without errors. I am using 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>

已解决:我只是将脚本与画布元素分离(为脚本创建了另一个文件以执行其功能).

SOLVED: I just decoupled the script from the canvas element (made another file for the script to execute its function).

更新的 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 文件:

New JavaScript file:

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

推荐答案

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

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

here is a working jsfiddle of your code:
new Chart(rice).Line(riceData);
http://jsfiddle.net/mahmalsami/jqcthmyo/
So the problem is definitively coming from your external Chart.min.js inclusion

You may find a 404 on your js get. Please make sure you're linking to the correct js folder. (try accessing your localhost/Chart.min.js to see if you can access to your file)

相关文章