I have the following codes to create chart graphics by dojox.charting:
我有以下代码来通过dojox.charting创建图表图形:
function createChart() {
var node = dojo.byId("surfaceDiv");
while (node.hasChildNodes())
{
node.removeChild(node.lastChild); // remove all the children graphics
}
var nodes = "";
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));
}
The function works fine for the first call; however, if it is called again, the chart is displayed OK, but the legend is not displayed. In firebug, I noticed there is an error saying "Tried to register widget with id==legend1 but that id is already registered" in manager.xd.js (line 8). It looks like that somewhere in dojox's library cached the previous legend object with the same id.
该功能适用于第一次通话;但是,如果再次调用它,则图表显示OK,但不显示图例。在firebug中,我注意到有一个错误说“尝试注册具有id == legend1的小部件,但该id已经注册”在manager.xd.js中(第8行)。看起来在dojox的库中某处缓存了具有相同id的上一个图例对象。
I guess I have to clean any legend previously registered or cached. How can I do that?
我想我必须清理以前注册或缓存的任何图例。我怎样才能做到这一点?
By the way, in my html page, I have several ancor links to call Javascript functions to draw different graphics in a div node with id="surfaceDiv", and the legend node" is the next div with id="legendDiv". Therefore, the above function can be called again.
顺便说一句,在我的html页面中,我有几个ancor链接来调用Javascript函数在div节点中绘制不同的图形,id =“surfaceDiv”,而图例节点“是id =”legendDiv“的下一个div。因此,可以再次调用上述函数。
I'm using dojox 1.3.0 and found the following works fine for me (legend is a global var) without any errors:
我正在使用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;
In this case, the legend is destroyed before it's recreated.
在这种情况下,图例会在重新创建之前被销毁。
Here is another link on this subject: http://www.dojotoolkit.org/forum/dojox-dojox/dojox-support/how-unregister-legend-dojox-charting
以下是该主题的另一个链接:http://www.dojotoolkit.org/forum/dojox-dojox/dojox-support/how-unregister-legend-dojox-charting
Why not use the legend's refresh()
method? That will work.
为什么不使用图例的refresh()方法?那可行。
I think that is a bug in dojox.charting.widget.Legend(...). What I did was to clean all the graphics and legend dom elements under div "surfaceDiv", and add new div "chart1" for chart and div "legend1" as legend. The chart works OK but not legend. I have the following anchor link call to the function in my html:
我认为这是dojox.charting.widget.Legend(...)中的一个错误。我所做的是清理div“surfaceDiv”下的所有图形和图例dom元素,并为图表添加新的div“chart1”,为图例添加div“legend1”。图表工作正常但不是图例。我在html中对函数进行了以下锚链接调用:
....
Curve chart
....
As a result, the function createChart() can be called more than once within the same web page session. The first time the chart and legend were displayed but the legend was missing in the subsequent calls or clicks.
因此,可以在同一网页会话中多次调用createChart()函数。第一次显示图表和图例,但后续调用或点击中缺少图例。
To work around the problem or bug, I have to set legend ID dynamically with different values. Any cached legend id value within dojox.charting.widget.Legend(...) will not be conflict with new ids. Here is the codes:
要解决问题或错误,我必须使用不同的值动态设置图例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 = "" +
""; // 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
}
I tested my codes and html page again. Legend is displayed every time!
我再次测试了我的代码和html页面。每次都显示图例!
The method I posted above is not a good way to resolve the issue. It is confirmed by a dojox's insider that it is a bug in dojox.charting based on my finding case. He does not recommend my way, removing HTML elements which I think for the chart and legend, as a solution.
我上面发布的方法不是解决问题的好方法。 dojox的内部人员证实,根据我的发现案例,它是dojox.charting中的一个错误。他不推荐我的方式,删除我认为图表和图例的HTML元素作为解决方案。
I think his suggestion is right. The chart and legend are created by dojox.charting APIs. My case of html page may not reveal all the DOM objects to be removed just for the clean up. Some DOM objects in cache may be left uncleaned behind sense. For example, in JS codes, I added two divs under an empty div: one for chart and one for legend. dojox.charting APIs add svg nodes under the chart div and converted legend div to a table. In addition to that, several invisible divs are created outside my initial empty div. This cleaning up method would left some mess or cause unpredictable problems. Further more, my method may be broken in the future of new or updated dojox.charting APIs (fixing bugs as example).
我认为他的建议是正确的。图表和图例由dojox.charting API创建。我的html页面的情况可能不会显示要清除的所有DOM对象。缓存中的某些DOM对象可能会在意义之后保持未清除状态。例如,在JS代码中,我在空div下添加了两个div:一个用于图表,一个用于图例。 dojox.charting API在图表div下添加svg节点,并将转换后的图例div添加到表中。除此之外,在我的初始空div之外创建了几个不可见的div。这种清理方法会留下一些混乱或导致不可预测的问题。此外,我的方法可能会在未来新的或更新的dojox.charting API(以修复错误为例)中被打破。
Since I am new to dojox.charting (just started to write some testing codes by its APIs in the last week based on an article), I am not sure if dojox.charting provides any way to clean up charts and legends? I think that would be best way or APIs to do it if available.
由于我是dojox.charting的新手(在上周根据文章开始用API编写一些测试代码),我不确定dojox.charting是否提供了清理图表和图例的方法?我认为这将是最佳方式或API,如果可用的话。
Even my above solution works fine for my base, deleting all the chidlren nodesunder an empty div, you should be aware the potential problems.
即使我的上述解决方案适用于我的基础,删除空div中的所有chidlren节点,你应该意识到潜在的问题。
All the demo codes, I can find out so far, are example codes to create or add new charts to a web page. There is no one, as far as I can tell, for updating, manipulating or simply refreshing charts. If the data series are coming from web services or REST, it would be a need just to update an area of charts. Here is an example of HTML page UP layout:
到目前为止,我能找到的所有演示代码都是用于创建或添加新图表到网页的示例代码。据我所知,没有人可以更新,操纵或只是刷新图表。如果数据系列来自Web服务或REST,则只需更新图表区域即可。以下是HTML页面UP布局的示例:
Curve chart -----------------------
Pie chart | div area for chart |
Bar chart | |
Refresh chart with changes | |
-----------------------
With options available to create chart in one div area, I think I do have a need to clean up the div if there is any chart generated previously.
如果有可用于在一个div区域中创建图表的选项,我认为如果以前生成任何图表,我确实需要清理div。
By looking at the codes how a chart and a legend are created by dojox.charting APIs:
通过查看代码如何通过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);
My guess is that chart1 and legend1 are DOM instances or objects? Not sure if there is any way to destroy those instances as a way to clean up chart and legend? How?
我的猜测是chart1和legend1是DOM实例还是对象?不确定是否有办法销毁这些实例作为清理图表和图例的方法?怎么样?