Erstellen von Diagrammen dynamisch Dojo

Question

Hallo Ich brauche Dojo-Charts in einer solchen Art und Weise zu schaffen, dass sie nehmen ihre Reihenwerte von bestimmten Eingabefelder und die Diagramm Änderungen automatically.So mit diesem Konzept ging ich weiter dies zu tun: -

  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();};

Dann rufe ich diese Funktion immer dann, wenn sich der Wert ändert: -

      dojo.connect(dojo.byId('myvalue'), "onchange",showChart);//whenever value changes the showChart function

heißt

Der HTML-Code sieht wie folgt aus: -

<div dojoType="dijit.layout.ContentPane" region="center">
           <div id="showgoals" style="width: 250px; height:150px;" class="graph1"></div>

Die unten ist das Textfeld, den Wert ändert: -

<input id="myvalue" type="text" dojoType="dijit.form.NumberTextBox" name="myvalue"value="1000000"  required="true"
                           invalidMessage="Only Numbers allowed"/><br/><br/>

Was ich wollte, war, dass, wenn der Wert in diesem Eingabefeld ändert, die Funktion show wird aufgerufen, und die gegenwärtige Handlung ist automatisch geändert, um die neuen Werte zu zeigen, aber was geschieht, ist, dass ich ein neues Diagramm völlig bekommen, was ganz natürlich scheint .. Will ich haben die alte Grafik zu zerstören und dann erstellen Sie das neue Diagramm, wenn ja Bitte sagen Sie mir, wie.

Answer 1

In der showChart Funktion wird ein neues Diagramm jedes Mal die Funktion erstellt new dojox.charting.Chart2D("showgoals") aufgerufen wird. Wenn Sie das Diagramm aktualisieren möchten, können Sie updateSeries zu Aktualisierungsdaten der Serie und Anruf render() rufen wieder das Diagramm zu aktualisieren.

Der Code wie folgt aussehen kann:

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();
}