动态创建道场图表答案

【问题标题】：creating dojo charts dynamically动态创建道场图表
【发布时间】：2010-11-21 03:47:34
【问题描述】：

您好，我需要以这样一种方式创建道场图表来自某些输入框的系列值和图表更改自动。所以有了这个概念，我继续这样做：-

  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 被调用，现在的情节是自动更改以显示新值，但发生的是我完全得到了一张新图表，这似乎很自然..我会必须销毁旧图表然后重新创建新图表，如果是这样请告诉我怎么做。

【问题讨论】：

标签： dojo dojox.charting

【解决方案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();
}

【讨论】：