动态创建dojo图表

Question

嗨我需要创建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就会被调用,并且当前的图表会自动更改以显示新值,但发生的事情是我完全得到一个新图表,这看起来很自然.我是否必须销毁旧图表然后重新创建新图表,如果是这样,请告诉我如何.

Answer 1

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