临时存储不可见 div 元素的数组

Question

我正在使用 FusionCharts，我使用这些图表的方式是......

1. 在 javascript 中，一个新图表被实例化
2. 创建新图表对象需要指定一个 div id
3. 我的页面从服务器动态加载内容，而用户从未真正离开页面
4. Fusion Charts 不允许在已包含图表的 div 中创建第二个图表
5. 话虽如此，我需要预先定义每一个可能的图表，即使它的父内容页面尚未加载，并在页面加载时实例化它。
6. 更进一步，为了创建这些图表“对象”，我需要已经为每个特定图表指定了一个 div 元素，由 ID 引用。

这是一个代码sn-p：

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 元素在被清除时与页面内容一起被删除（被其他动态页面内容替换）。

Answer 1

您可以采用的另一种方法是为每个图表创建一个新的 div 并根据需要隐藏/显示它们。

例如，

var Charts = new Array();
var openChart = null;
var chartTarget = $("#chartTarget");

for(var i = 0; i < nCharts; i++)
{
    var chartDiv = $("<div/>", {
        id:'chart_' + i
    });
    chartDiv.hide();
    chartDiv.appendTo(chartTarget);

    Charts[i] = new FusionCharts("Column.swf", "chart_" + i);

    // now the chart div has been hidden and appended to the target
}

function showChart(index)
{
    // first, see if an open chart exists
    if(openChart !== null)
    {
        openChart.hide();
    }

    // find the target chart div to show
    var targetChartDiv = $("#chart_" + index);
    targetChartDiv.show();

    // now the new opened chart is the target chart div
    openChart = targetChartDiv;
}

这样，您的每个图表都位于一个唯一的 ID 中。并且由于 ID 是由索引定义的，因此您不需要创建 div 数组。只需通过 ID 获取元素，它应该可以正常工作..

Answer 2

解决您的问题的一个很酷的方法是在页面加载之前继续实例化图表，就像您现在所做的那样。但是，将构造函数参数修改为对象样式表示法。在对象式构造中，您可以预先指定要呈现图表的 div 的 id（使用 renderAt 属性），然后在页面加载时，只需遍历图表并在它们上调用 .render()。

与您现在使用的线性构造方法相比，对象样式表示法提供了更多的参数和配置。

例子：

var charts = [];
function InitCharts() {
    charts[0] = new FusionCharts({
        swfUrl: "MSColumn3DLineDY.swf", 
        renderAt: "divChartSSumA1", 
        width: "340",
        height: "340"
    });
}

function onFinalLoad() {
    var i = charts.length;
    while (i--) {
        charts[i].render();
    }
}

此外，FusionCharts 支持在单个 div 中渲染多个图表。在对象样式表示法中，只需提供insertMode: "append"

请参阅 FusionCharts 文档中的 construction methods in JavaScript 以了解有关对象样式表示法的更多信息。

Answer 3

如果您正在为此寻找解决方案：“Fusion Charts 不允许在已包含图表的 div 中创建第二个图表”，您已经有了解决方案：

在基于对象的构造函数参数中使用 insertMode 构造函数属性。可能的值是“replace”、“append”、“prepend”。

你可以试试的例子：

    var myChart = FusionCharts.render({
        swfUrl : "../../../../Charts/Column3D.swf",
        width: "400",
        height: '300',
        renderAt : "chartContainer",
        dataSource : '<chart caption="Weekly Sales Summary" xAxisName="Week" yAxisName="Sales" numberPrefix="$"><set label="Week 1" value="14400" /><set label="Week 2" value="19600" /><set label="Week 3" value="24000" /><set label="Week 4" value="15700" /></chart>',
        dataFormat : "xml"
    });


     var myChart2 = FusionCharts.render({
        swfUrl : "../../../../Charts/Column2D.swf",
        width: "400",
        height: '300',
        insertMode: 'append',
        renderAt : "chartContainer",
        dataSource : '<chart caption="Weekly Sales Summary" xAxisName="Week" yAxisName="Sales" numberPrefix="$"><set label="Week 1" value="14400" /><set label="Week 2" value="19600" /><set label="Week 3" value="24000" /><set label="Week 4" value="15700" /></chart>',
        dataFormat : "xml"
    });

     var myChart3 = FusionCharts.render({
        swfUrl : "../../../../Charts/Line.swf",
        width: "400",
        height: '300',
        insertMode: 'prepend',
        renderAt : "chartContainer",
        dataSource : '<chart caption="Weekly Sales Summary" xAxisName="Week" yAxisName="Sales" numberPrefix="$"><set label="Week 1" value="14400" /><set label="Week 2" value="19600" /><set label="Week 3" value="24000" /><set label="Week 4" value="15700" /></chart>',
        dataFormat : "xml"
    });