在dojo中创建条形图，并通过文本框从用户那里获取系列值
||
我希望开发一个应用程序，它允许用户通过输入（如下面的文本框）设置系列的值以及轴的标签，这是我尝试过的代码，
<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>
没有找到相关结果
已邀请:
1 个回复
揽芳僵迷仇
Dijit的方法使用大写i（），因此您需要更改这四行。解决此问题，看看是否可行。