создание диаграмм Dojo динамически
-
26-09-2019 - |
Вопрос
Привет, мне нужно создать диаграммы Dojo таким образом, что они принимают значения их серии из определенных входных ящиков, а график меняется автоматически. Так как с этой концепцией я пошел вперед: -
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();};
Затем я называю эту функцию всякий раз, когда значение изменяется: -
dojo.connect(dojo.byId('myvalue'), "onchange",showChart);//whenever value changes the showChart function
называется
HTML выглядит так: -
<div dojoType="dijit.layout.ContentPane" region="center">
<div id="showgoals" style="width: 250px; height:150px;" class="graph1"></div>
Ниже приведен текстовое поле, которое меняет значение: -
<input id="myvalue" type="text" dojoType="dijit.form.NumberTextBox" name="myvalue"value="1000000" required="true"
invalidMessage="Only Numbers allowed"/><br/><br/>
То, что я хотел, было то, что всякий раз, когда значение в этом входном поле меняется, функция ShowChart вызывается, и настоящий график автоматически меняется, чтобы показать новые значения, но то, что происходит, так это то, что я получаю новый график, что кажется довольно естественным. , Должен ли я уничтожить старую карту, а затем воссоздать новый график, если так, пожалуйста, скажите, как.
Решение
в showChart
Функция, новый график создан каждый раз, когда функция называется, используя new dojox.charting.Chart2D("showgoals")
. Отказ Если вы хотите обновить график, вы можете позвонить updateSeries
обновлять данные серии и позвонить render()
снова, чтобы обновить график.
Код может выглядеть как ниже:
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();
}