Dojo 1.8 chart programmatic tutorial error

StackOverflow https://stackoverflow.com/questions/12910918

문제

I have been going through some of the Dojo 1.8 tutorials, which are great, but have encountered a bug in the basic charting tutorial. The declarative example works fine, but the programmatic example has an error when it tries to render the chart.

Charting tutorial: http://dojotoolkit.org/documentation/tutorials/1.8/charting/

Working declarative example: http://dojotoolkit.org/documentation/tutorials/1.8/charting/demo/basic-declarative.php

Errored programmatic example: http://dojotoolkit.org/documentation/tutorials/1.8/charting/demo/basic-programmatic.php

From my investigations it looks like the problem is with the code trying to use the 'IN' operand on a string, at which point it falls over.

The error in firebug looks like this: "TypeError: invalid 'in' operand t"

You'll need to download the non minified version of dojox/gfx/path.js and look at line 191 where you'll see this snippet of code: 

if(t instanceof Array){
    this._collectArgs(_12,t);
  }else{
    if("x" in t&&"y" in t){
      _12.push(t.x,t.y);
    }
  }

I believe that the error is where the logic falls through into the "if("x" in t&&"y" in t)" line.

Any ideas?

도움이 되었습니까?

해결책

it seems its an error in the tutorial, the 'labelOffset' is supposed to take a Number, but they are giving it a string, thus it fails, take the quotes away and it works, see this forum post. Charting tutorial in 1.7 and 1.8

다른 팁

Right I've found the reason for the bug, but not the remedy.

Its the labelOffset value being a minus number, fancy that!

So if you change the "-20" to "20" it runs without error.

Full example including the minus value causing the bug...

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Demo: Basic Programmatic Chart</title>
    <link rel="stylesheet" href="style.css" media="screen">
    <link rel="stylesheet" href="../../../resources/style/demo.css" media="screen">
  </head>
  <body>
     <h1>Demo: Basic Programmatic Chart</h1>

     <!-- create the chart -->
     <div id="chartNode" style="width: 550px; height: 550px;"></div>

     <!-- load dojo and provide config via data attribute -->
     <!-- load dojo and provide config via data attribute -->
     <script src="//ajax.googleapis.com/ajax/libs/dojo/1.8/dojo/dojo.js"></script>
     <script>

     // x and y coordinates used for easy understanding of where they should display
     // Data represents website visits over a week period
     chartData = [
       { x: 1, y: 19021 },
       { x: 1, y: 12837 },
       { x: 1, y: 12378 },
       { x: 1, y: 21882 },
       { x: 1, y: 17654 },
       { x: 1, y: 15833 },
       { x: 1, y: 16122 }
     ];

     require([
        // Require the basic 2d chart resource
        "dojox/charting/Chart",

        // Require the theme of our choosing
        "dojox/charting/themes/Claro",

        // Charting plugins: 

        //Require the Pie type of Plot 
        "dojox/charting/plot2d/Pie",

        // Wait until the DOM is ready
        "dojo/domReady!"
      ], function(Chart, theme, PiePlot){

        // Create the chart within it's "holding" node
        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" <-- bug value here
        });

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

        // Render the chart!
        pieChart.render();

      });
    </script>
  </body>
</html>

Just make the labelOffset value positive instead, and everything should run ok.

labelOffset: "20"
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top