在dojo中创建一个条形图,其中包含要通过文本框从用户处获取的系列值

时间:2011-04-14 05:59:57

标签: dojo dojox.charting

我希望开发一个应用程序,允许用户设置系列的值,并通过下面的文本框输入轴的标签是我尝试的代码,

<html>
<head>

<title>Chart Demo</title>
    <style type="text/css">
        @import "../dijit/themes/tundra/tundra.css";
        @import "../dojo/resources/dojo.css"
    </style>

    <SCRIPT type=text/javascript src="dojo/dojo.js" djConfig="isDebug: true"></SCRIPT> 

    <script type="text/javascript">
      //dojo.require("dojo.event.*");

       dojo.require("dojo.parser");
       dojo.require("dijit.layout.SplitContainer");
       dojo.require("dijit.layout.ContentPane");
       dojo.require("dijit.form.NumberSpinner");
       dojo.require("dojox.charting.Chart2D");
      //dojo.require("dojo.widget.*");
      //dojo.require("dojo.widget.Button");


makeCharts = function() {
    var val1=dijit.byid('val1').get('value');
    var val2=dijit.byid('val2').get('value');
    var val3=dijit.byid('val3').get('value');
    var val4=dijit.byid('val4').get('value');

    var chart1 = new dojox.charting.Chart2D("simplechart");
    chart1.addPlot("default", {type: "Columns", gap: 5});
    chart1.addAxis("x",{
    labels: [
        {value: 0, text: "one"},
        {value: 1, text: "two"}, 
        {value: 2, text: "three"},
        {value: 3, text: "four"}]}
);
    chart1.addAxis("y", {vertical: true});
    chart1.addSeries("Series 1", [val1, val2, val3, val4]);


    chart1.render();

};

     </script>

</head>
<body class="tundra">

        <div dojoType="dijit.layout.SplitContainer" orientation="horizontal" 
sizerWidth="10" activeSizing="true"
                style="border: 1px solid #FF00FF; width: 600px; height: 205px;">

                <div dojoType="dijit.layout.ContentPane" sizeMin="10" sizeShare="10">
                    <p><b>Enter the required details for chart</b></p>
    <form method="post" id="dataForm" name="dataForm>

    <table>
    <tr>
    <td><label>X-axis</label></td>
    <td><input type="text" trim="true" dojoType="dijit.form.TextBox" 
value="" name="x" id="tx"/></td>
    </tr>
    <tr>
    <td><label>y-axis</label></td>
    <td><input type="text" trim="true" dojoType="dijit.form.TextBox" 
value="" name="y" id="ty"/></td>
    </tr>
    <tr>
    <td><label>value1</label></td>
    <td><input dojoType="dijit.form.NumberSpinner"
          value="0"
          smallDelta="1"
          constraints="{min:0,max:1000,places:0}"
          maxlength="20"
          id="val1"></td>
    </tr>
    <tr>
    <td><label>value2</label></td>
    <td><input dojoType="dijit.form.NumberSpinner"
          value="0"
          smallDelta="1"
          constraints="{min:0,max:1000,places:0}"
          maxlength="20"
          id="val2"></td>
    </tr>
    <tr>
    <td><label>value3</label></td>
    <td><input dojoType="dijit.form.NumberSpinner"
          value="0"
          smallDelta="1"
          constraints="{min:0,max:1000,places:0}"
          maxlength="20"
          id="val3"></td>
    </tr>
    <tr>
    <td><label>value4</label></td>
    <td><input dojoType="dijit.form.NumberSpinner"
          value="0"
          smallDelta="1"
          constraints="{min:0,max:1000,places:0}"
          maxlength="20"
          id="val4"></td>
    </tr>
    <tr>
    <td colspan="2">
<input name="Submit" type="button" id="Submit" onclick="makeCharts();" value="Submit" />

</td>
    </tr>
    </table>
                </form>

                </div>
                <div dojoType="dijit.layout.ContentPane" sizeMin="10" sizeShare="10"  id=simplechart>

                </div>
        </div>

</body>
</html> 

但是这段代码产生了一些错误,我无法调试.... 请帮忙

网页错误详情

用户代理:Mozilla / 4.0(兼容; MSIE 8.0; Windows NT 6.1; Trident / 4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C ; .NET4.0E; MS-RTC LM 8) 时间戳:星期四,2011年4月14日05:51:38 UTC

消息:对象不支持此属性或方法 行:25 查尔:2 代码:0 URI:file:/// D:/dojo%20new/dojo-release-1.6.0-src/trial1.html

1 个答案:

答案 0 :(得分:1)

由于你没有正确地格式化你的问题,并且几乎忽略了HTML的所有相关部分,这很难说,但是我发现了一些事情:

在这里,你最后错过了一个引号:

<form method="post" id="dataForm" name="dataForm>

Dijit的byId方法使用大写i(dijit.byId(...)),因此您需要更改这四行。

var val1=dijit.byid('val1').get('value'); 
var val2=dijit.byid('val2').get('value'); 
var val3=dijit.byid('val3').get('value'); 
var val4=dijit.byid('val4').get('value');

修复此问题并查看其是否有效。