la creazione di grafici in modo dinamico dojo
-
26-09-2019 - |
Domanda
Ciao ho bisogno di creare Dojo grafici in tale modo un che prendono il loro valori della serie a determinate caselle ed i grafici modifiche automatically.So con questo concetto sono andato avanti a fare questo: -
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();};
Poi chiamo questa funzione ogni volta che il valore cambia: -
dojo.connect(dojo.byId('myvalue'), "onchange",showChart);//whenever value changes the showChart function
si chiama
Gli sguardi html come questo: -
<div dojoType="dijit.layout.ContentPane" region="center">
<div id="showgoals" style="width: 250px; height:150px;" class="graph1"></div>
Il sotto è la casella di testo che cambia il valore: -
<input id="myvalue" type="text" dojoType="dijit.form.NumberTextBox" name="myvalue"value="1000000" required="true"
invalidMessage="Only Numbers allowed"/><br/><br/>
Quello che volevo era che ogni volta che il valore in questa casella di ingresso cambia, la funzione showChart viene chiamata e la trama è presente automaticamente in modo da mostrare i nuovi valori, ma ciò che sta accadendo è che ho un nuovo grafico del tutto, che sembra del tutto naturale .. Will I devono distruggere il vecchio schema e quindi ricreare la nuova tabella, in caso affermativo prego di dirmi come.
Soluzione
Nella funzione showChart
, un nuovo grafico si crea ogni volta che la funzione viene chiamata utilizzando new dojox.charting.Chart2D("showgoals")
. Se si desidera aggiornare il grafico, è possibile chiamare updateSeries
per aggiornare i dati della serie e chiamata render()
per aggiornare la tabella.
Il codice può essere simile di seguito:
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();
}