未捕获的ReferenceError:Dojo API未定义require

时间:2018-08-08 17:49:25

标签: javascript html dojo require dojox.charting

我已经看到此错误的多种体现,但没有看到与使用Dojo API / CDN直接相关的答案。我只是通过一个快速的Dojo制图教程来弄清楚如何正确应用饼图。我使用简单的说明来设置一个网页,可以用来从本地进行测试(请参见下文)。每次启动.html文件时,都会收到错误-Uncaught ReferenceError: require is not defined。先前的所有答案都指向src的错误,无论它是cdn,api还是文件路径。我尝试了多种CDN和配置,包括src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"

<script data-dojo-config="async: 1"
        src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>`, 

但是我仍然遇到相同的错误(这些都是直接来自文档)。关于导致此错误的原因以及如何解决该问题以测试我的简单饼图的任何建议?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Tutorial: Pie Chart!</title>
        <script> src="//ajax.googleapis.com/ajax/libs/dojo/1.13.0/dojo/dojo.js"></script>
    </head>
    <body>
        <script>
            require([
                'dojo/dom',
                'dojo/dom-construct',
                'dojox/charting/Chart',
                'dojox/charting/themes/Claro',
                'dojox/charting/PiePlot'
            ], function (dom, domConstruct, Chart, theme, PiePlot) {
                var pieChart = new Chart("chartNode");

            // Set the theme
            pieChart.setTheme(theme);

            // Add the only/default plot
            pieChart.addPlot("default", {
                type: PiePlot, // our plot2d/Pie module reference as type value
                radius: 200,
                fontColor: "black",
                labelOffset: -20
            });

            // Add the series of data
            pieChart.addSeries("January",chartData);

            // Render the chart!
            pieChart.render();
        });
        </script>
        <div id="chartNode" style="width: 550px; height: 550px;"></div>
    </body>
</html>

1 个答案:

答案 0 :(得分:1)

首先,您的脚本标记行6中存在类型错误, 封闭标记脚本和script标记之外的src attrib,导致错误的原因不是...

更正了这些错误之后,您仍然会有一些错误,

所以您需要修复导入

'dojox/charting/PiePlot'应替换为'dojox/charting/plot2d/Pie'

,您需要在此处声明chartData

如果您需要文件版本,请参见此GIST

否则请参见以下工作片段:

require([
  'dojo/dom',
  'dojo/dom-construct',
  'dojox/charting/Chart',
  'dojox/charting/themes/Claro',
  'dojox/charting/plot2d/Pie'
], function(dom, domConstruct, Chart, theme, PiePlot) {
  
  chartData = [
      { y: 389, text: "data1 " },
      { y: 125, text: "data 2" },
      { y: 285, text: "data 3" },
      { y: 193, text: "data 4" },
       { y: 21, text: "No data" }
  ];

  
  var pieChart = new Chart("chartNode");

  // Set the theme
  pieChart.setTheme(theme);

  // Add the only/default plot
  pieChart.addPlot("default", {
    type: PiePlot, // our plot2d/Pie module reference as type value
    radius: 200,
    fontColor: "black",
    labelOffset: -20
  });

  // Add the series of data
  pieChart.addSeries("January", chartData);

  // Render the chart!
  pieChart.render();
});
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dojo/dojo.js"></script>
<div id="chartNode" style="width: 550px; height: 550px;"></div>