Erstellen von Diagrammen Dojo dynamisch

Question

Hallo ich brauche Dojo-Charts in einer solchen Art und Weise zu schaffen, dass sie nehmen ihre Serie Werte von bestimmten Eingabefelder und die Grafik ändert automatically.So mit diesem Konzept, das ich vor dieser ging 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 

genannt wird

Die html wie thi sieht s: -

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

Die unten ist das Textfeld, der 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 das aktuelle Diagramm ist automatisch geändert, um die neuen Werte zu zeigen, aber was passiert ist, ist , dass ich ein neues Diagramm vollständig, die ganz natürlich scheint .. Ich werde hav e, um das alte Diagramm zu zerstören und dann das neue Diagramm neu zu erstellen, wenn so bitte sag mir wie.

Answer 1

In der Funktion showChart wird bei jedem Aufruf der Funktion mit ein neues Diagramm erstellt. Wenn Sie das Diagramm aktualisieren möchten, können Sie updateSeries aufrufen, um Daten der Serie zu aktualisieren, und render() erneut aufrufen, um das Diagramm zu aktualisieren.

Der Code kann wie folgt aussehen:

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