la creación de gráficos dojo dinámicamente
-
26-09-2019 - |
Pregunta
Hola necesidad de crear gráficos dojo en una forma tal que se toman su valores de la serie de determinados cuadros de entrada y los cambios tabla automatically.So con este concepto que siguió adelante haciendo esto: -
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();};
A continuación, llamo esta función cada vez que cambia el valor de: -
dojo.connect(dojo.byId('myvalue'), "onchange",showChart);//whenever value changes the showChart function
se llama
Las miradas del HTML como la siguiente: -
<div dojoType="dijit.layout.ContentPane" region="center">
<div id="showgoals" style="width: 250px; height:150px;" class="graph1"></div>
A continuación es el cuadro de texto que cambia de valor: -
<input id="myvalue" type="text" dojoType="dijit.form.NumberTextBox" name="myvalue"value="1000000" required="true"
invalidMessage="Only Numbers allowed"/><br/><br/>
Lo que quería era que cada vez que el valor de este cuadro de entrada cambia, showChart la función se llama y la actual trama es cambia automáticamente para mostrar los nuevos valores, pero lo que está sucediendo es que consigo un nuevo gráfico totalmente, lo que parece muy natural .. I Will que destruir la vieja tabla y volver a crear la nueva tabla, en caso afirmativo por favor dígame cómo.
Solución
En la función showChart
, una nueva tabla se crea cada vez que la función se llama usando new dojox.charting.Chart2D("showgoals")
. Si desea actualizar la tabla, usted puede llamar a updateSeries
datos de actualización de la serie y render()
llamada de nuevo para actualizar la tabla.
El código puede parecerse a continuación:
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();
}