إنشاء مخططات دوجو ديناميكيًا
-
26-09-2019 - |
سؤال
مرحبًا ، أنا بحاجة إلى إنشاء مخططات Dojo بطريقة تتخذ قيم السلسلة الخاصة بهم من بعض صناديق الإدخال ويتغير المخطط تلقائيًا.
var showChart= function(){
var thevalue=dijit.byId('myvalue').get('value');//gets thevalue from the dijit numbertextbox
var chart1 = new dojox.charting.Chart2D("showgoals");
chart1.addPlot("default", {type: "Lines"});
chart1.addAxis("x");
chart1.addAxis("y", {vertical: true});
chart1.addSeries("Series 1", [thevalue, 2, 2, 3, 4, 5, 5, 7]);
chart1.render();};
ثم أسمي هذه الوظيفة كلما تغيرت القيمة:-
dojo.connect(dojo.byId('myvalue'), "onchange",showChart);//whenever value changes the showChart function
يسمى
يبدو أن HTML مثل هذا:-
<div dojoType="dijit.layout.ContentPane" region="center">
<div id="showgoals" style="width: 250px; height:150px;" class="graph1"></div>
أدناه هو مربع النص الذي يغير القيمة:-
<input id="myvalue" type="text" dojoType="dijit.form.NumberTextBox" name="myvalue"value="1000000" required="true"
invalidMessage="Only Numbers allowed"/><br/><br/>
ما أردته هو أنه كلما تغيرت القيمة في مربع الإدخال هذا ، يتم استدعاء وظيفة ShowChart ويتم تغيير المؤامرة الحالية تلقائيًا لإظهار القيم الجديدة ، ولكن ما يحدث هو أنني أحصل على مخطط جديد تمامًا ، وهو أمر طبيعي تمامًا. . هل سيتعين علي تدمير المخطط القديم ثم إعادة إنشاء الرسم البياني الجديد ، إذا كان الأمر كذلك من فضلك أخبرني كيف.
المحلول
في ال showChart
وظيفة ، يتم إنشاء مخطط جديد في كل مرة يتم فيها استخدام الوظيفة باستخدام new dojox.charting.Chart2D("showgoals")
. إذا كنت ترغب في تحديث المخطط ، يمكنك الاتصال updateSeries
لتحديث بيانات السلسلة والاتصال render()
مرة أخرى لتحديث المخطط.
قد يبدو الرمز أدناه:
var chart1 = null;
var showChart = function() {
var thevalue=dijit.byId('myvalue').get('value');
if (!chart1) {
var chart1 = new dojox.charting.Chart2D("showgoals");
chart1.addPlot("default", {type: "Lines"});
chart1.addAxis("x");
chart1.addAxis("y", {vertical: true});
chart1.addSeries("Series 1", [thevalue, 2, 2, 3, 4, 5, 5, 7]);
}
else {
chart1.updateSeries("Series 1", [thevalue, 2, 2, 3, 4, 5, 5, 7]);
}
chart1.render();
}