Создайте гистограмму в Dojo со значениями ряда, которые будут взяты у пользователей через текстовые поля - PullRequest
Новая
       8

Создайте гистограмму в Dojo со значениями ряда, которые будут взяты у пользователей через текстовые поля

0 голосов
/ 14 апреля 2011

Я хочу разработать приложение, которое позволяет пользователю устанавливать значения для серии, а также метки для осей посредством ввода, как в текстовых полях ниже, это код, который я пробовал, 

<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) Отметка времени: чт, 14 апреля 2011 г. 05:51:38 UTC

Сообщение: объект не поддерживает это свойство или метод Строка: 25 Символ: 2 Код: 0 URI: файл: /// D: /dojo%20new/dojo-release-1.6.0-SRC / trial1.html

1 Ответ

1 голос
/ 14 апреля 2011

Поскольку вы не отформатировали свой вопрос должным образом и не указали практически все релевантные части своего 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');

Исправьте это и посмотрите, работает ли оно.

...