我正在使用 FusionCharts,我使用这些图表的方式是......
- 在javascript中,一个新的图表被实例化
- 新建图表对象需要指定一个 div id
- 我的页面从服务器动态加载内容,而用户实际上从未离开页面
- Fusion Charts 不允许在已经有图表的 div 中创建第二个图表
- 话虽如此,我需要预先定义每一个可能的图表,即使它的父内容页面尚未加载,并在页面加载时实例化它。
- 更进一步,为了创建这些图表“对象”,我需要已经为每个特定图表指定了一个 div 元素,由 ID 引用。
这是一个代码片段:
var Charts = new Array();
function InitCharts() {
Charts[0] = new FusionCharts("MSColumn3DLineDY.swf", "divChartSSumA1", "340", "340");
Charts[1] = new FusionCharts("MSColumn3DLineDY.swf", "divChartSSumA2", "340", "340");
Charts[2] = new FusionCharts("MSColumn3DLineDY.swf", "divChartSSumA3", "340", "340");
}
现在上面的问题是我将如何预先创建 div 元素并在不使用时暂时隐藏它们,然后在需要显示它们时将它们显示在适当的占位符中?我希望用户能够在图表的“页面”之间快速来回切换,每个页面都从服务器动态加载并“注入”到页面的主要内容区域。因此,如果未加载特定图表的内容,图表对象将引发其父 div 不存在的错误。
具体来说,我将如何维护一个不可见的命名 div 列表并根据需要在某些地方显示它们?问题始于确保每个元素与其图表对象完全对应。
我也在思考如果我可以创建一个不可见的 div 对象并将其引用与图表一起存储在这个数组中怎么办?更好的是,我将如何编写自己的类,它只有 A) 图表对象和 B) div 元素。
请注意:当内容部分更改并且 div 消失时,图表占位符 div 必须在内容被清除和替换之前“移动”回其原始位置。我不确定有什么技巧可以避免这种情况,而无需费力地移动 innerHTML。我只是担心这些 div 元素在被清除时与页面内容一起被删除(被其他动态页面内容替换)。