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));
}

该功能适用于第一次通话;但是，如果再次调用它，则图表显示OK，但不显示图例。在firebug中，我注意到有一个错误说“尝试注册具有id == legend1的小部件，但该id已经注册”在manager.xd.js中（第8行）。它似乎在dojox的库中某处缓存了具有相同id的上一个图例对象。

我想我必须清理以前注册或缓存的任何图例。我怎么能这样做？

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

Answer 1

我正在使用dojox 1.3.0并发现以下对我来说很好（传奇是一个没有任何错误的全局变量：

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 2

为什么不使用图例的refresh()方法？这将有效。

Answer 3

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

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

因此，可以在同一网页会话中多次调用createChart（）函数。第一次显示图表和图例，但后续调用或点击中缺少图例。

要解决此问题或错误，我必须使用不同的值动态设置图例ID。 dojox.charting.widget.Legend（...）中的任何缓存的图例id值都不会与新的ID冲突。这是代码：

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 4

我上面发布的方法不是解决问题的好方法。 dojox的内部人员证实，根据我的发现案例，它是dojox.charting中的一个错误。他不推荐我的方式，删除我认为的图表和图例的HTML元素作为解决方案。

我认为他的建议是正确的。图表和图例由dojox.charting API创建。我的html页面的情况可能不会显示所有要删除的DOM对象。高速缓存中的一些DOM对象可能在感觉之后未被清除。例如，在JS代码中，我在空div下添加了两个div：一个用于图表，一个用于图例。 dojox.charting API在图表div下添加svg节点，并将转换后的图例div添加到表中。除此之外，在我的初始空div之外创建了几个不可见的div。这种清理方法会留下一些混乱或导致不可预测的问题。此外，我的方法可能在未来新的或更新的dojox.charting API（以修复错误为例）中被打破。

由于我是dojox.charting的新手（刚开始基于an article在上周开始用API编写一些测试代码），我不确定dojox.charting是否提供了清理图表的方法和传说？我认为这将是最好的方式或API，如果可用的话。

即使我的上述解决方案对我的基础工作正常，删除空div中的所有chidlren节点，你应该知道潜在的问题。

到目前为止，我能找到的所有演示代码都是用于创建或添加新图表到网页的示例代码。据我所知，没有人可以更新，操纵或只是刷新图表。如果数据系列来自Web服务或REST，则只需更新图表区域即可。以下是HTML页面向上布局的示例：

 Curve chart                 -----------------------
 Pie chart                   |  div area for chart |
 Bar chart                   |                     |
 Refresh chart with changes  |                     |
                             -----------------------

如果有可用于在一个div区域中创建图表的选项，我认为如果以前生成任何图表，我确实需要清理div。

通过查看代码如何通过dojox.charting API创建图表和图例：

 // nodeDivForChart and NodeDivForLegend are div nodes
 var chart1  = new dojox.charting.Chart2D(nodeDivForChart);
 ....
 var legend1 = new dojox.charting.widget.Legend(
   {chart: chart1}, nodeDivForLegend.id);

我的猜测是chart1和legend1是DOM实例还是对象？不确定是否有办法销毁这些实例作为清理图表和图例的方法？怎么样？

如何在dojox.charting中取消注册图例？

4 个答案: