如何在dojox.charting中注销图例？

Question

我有以下代码来用dojox.charting创建图表图形：

function createChart() {
  var node = dojo.byId("surfaceDiv");
  while (node.hasChildNodes())
  {
    node.removeChild(node.lastChild); // remove all the children graphics
  }
  var nodes =  "<div id='chart1' style='width: 10px; height: 10px;'></div><div id='legend1' ></div>";
  dojo.html.set(node, nodes);
  var nodeChart = dojo.byId("chart1");
  var nodeLegend = dojo.byId("legend1");

  var chart1 = new dojox.charting.Chart2D(nodeChart);
  // set chart types and point series
  chart1.render();
  // now to add legend:
  var legendNode = new dojox.charting.widget.Legent(
     {chart: chart1}, nodeLegend.id));
}

该函数在第一次调用时运行良好；但是，如果再次调用该函数，则图表显示正常，但不显示图例。在firebug中，我注意到在manager.xd.js (第8行)中有一个错误，写着“尝试用id==legend1注册小部件，但该id已经注册”。看起来dojox的库中的某个地方缓存了具有相同id的前一个图例对象。

我想我必须清除之前注册或缓存的任何图例。我该怎么做呢？

顺便说一下，在我的html页面中，我有几个JavaScript链接调用id="surfaceDiv“在一个div节点中绘制不同的图形，图例节点”是下一个带有id="legendDiv“的div。因此，可以再次调用上面的函数。

Answer 1

我认为这是dojox.charting.widget.Legend(...)中的一个错误。我所做的是清理div "surfaceDiv“下的所有图形和图例dom元素，并为图表添加新的div "chart1”，添加新的div "legend1“作为图例。图表工作正常，但图例工作不正常。我在我的html中有以下对函数的锚点链接调用：

....
<a href="javascript:createChart();">Curve chart</a>
....

因此，可以在同一网页会话中多次调用函数createChart()。第一次显示图表和图例，但在随后的调用或单击中缺少图例。

为了解决这个问题或bug，我必须用不同的值动态设置图例ID。dojox.charting.widget.Legend(...)中任何缓存的图例ID值将不会与新ids冲突。代码如下：

var legendCount = 0; // global value 

function createChart() {
  var node = dojo.byId("surfaceDiv");
  while (node.hasChildNodes())
  {
    node.removeChild(node.lastChild); // remove all the children graphics
  }
  var legendID = "legend" + legendCount++;
  var nodes =  "<div id='chart1' style='width: 10px; height: 10px;'></div>" +
    "<div id='" + legendID + "' ></div>"; // Set legend ID dynamically
  dojo.html.set(node, nodes);
  var nodeChart = dojo.byId("chart1");
  var nodeLegend = dojo.byId(legendID);

  var chart1 = new dojox.charting.Chart2D(nodeChart);
  // set chart types and point series
  chart1.render();
  // now to add legend:
  var legendNode = new dojox.charting.widget.Legent(
    {chart: chart1}, nodeLegend.id)); // no more conflict legend's ID
}

我再次测试了我的代码和html页面。每次都会显示图例！

Answer 2

我正在使用dojox 1.3.0，并且发现以下代码对我来说工作得很好(legend是一个全局变量)，没有任何错误：

if (legend != undefined) {
  legend.destroyRecursive(true); 
} 

legend = new dojox.charting.widget.Legend({chart: chart1,horizontal: true}, 'legend');

//or try this
var myObj = new dojoObject(...);
...
// do whatever we want with it
...
// now we don't need it and we want to dispose of it
myObj.destroy();
delete myObj;

在这种情况下，图例在重新创建之前被销毁。

这是关于这个主题的另一个链接：http://www.dojotoolkit.org/forum/dojox-dojox/dojox-support/how-unregister-legend-dojox-charting

Answer 3

为什么不使用图例的refresh()方法呢？这会起作用的。