1

我有以下代码通过 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，但图例不显示。在萤火虫中，我注意到在 manager.xd.js（第 8 行）中有一条错误提示“尝试使用 id==legend1 注册小部件，但该 id 已注册”。看起来 dojox 库中的某个地方缓存了具有相同 ID 的前一个图例对象。

我想我必须清除以前注册或缓存的任何图例。我怎样才能做到这一点？

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

4

4 回答 4

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

于 2009-08-20T17:49:39.413 回答
1

为什么不使用图例的refresh()方法？那可行。

于 2011-03-07T23:39:09.190 回答
0

我认为这是 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 页面。每次都显示传奇！

于 2009-03-27T18:20:49.480 回答
0

我上面发布的方法不是解决问题的好方法。根据我的发现案例，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 的新手（上周刚开始根据一篇文章通过其 API 编写一些测试代码），我不确定 dojox.charting 是否提供任何清理图表和图例的方法？我认为如果可用的话，这将是最好的方法或 API。

即使我的上述解决方案也适用于我的基础，删除空 div 下的所有儿童节点，你应该意识到潜在的问题。

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

 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 实例还是对象？不确定是否有任何方法可以销毁这些实例以清理图表和图例？如何？

于 2009-03-28T20:31:46.660 回答