Criando gráficos de dojo dinamicamente
-
26-09-2019 - |
Pergunta
Olá, eu preciso criar gráficos de dojo de tal maneira que eles recebam seus valores em série de determinadas caixas de entrada e as mudanças de gráfico automaticamente. Então, com esse conceito, fui em frente fazendo isso:-
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();};
Então eu chamo essa função sempre que o valor mudar:-
dojo.connect(dojo.byId('myvalue'), "onchange",showChart);//whenever value changes the showChart function
é chamado
O HTML se parece com o seguinte:-
<div dojoType="dijit.layout.ContentPane" region="center">
<div id="showgoals" style="width: 250px; height:150px;" class="graph1"></div>
A abaixo está a caixa de texto que muda o valor:-
<input id="myvalue" type="text" dojoType="dijit.form.NumberTextBox" name="myvalue"value="1000000" required="true"
invalidMessage="Only Numbers allowed"/><br/><br/>
O que eu queria era que sempre que o valor nessa caixa de entrada muda, a função ShowChart é chamada e o gráfico atual é alterado automaticamente para mostrar os novos valores, mas o que está acontecendo é que eu recebo um novo gráfico totalmente, o que parece bastante natural. . Terei que destruir o gráfico antigo e depois recriar o novo gráfico, se assim for, diga -me como.
Solução
No showChart
função, um novo gráfico é criado toda vez que a função é chamada usando new dojox.charting.Chart2D("showgoals")
. Se você quiser atualizar o gráfico, você pode ligar updateSeries
Para atualizar dados da série e ligar render()
novamente para atualizar o gráfico.
O código pode parecer abaixo:
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();
}