Question

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

在javascript中，实例化新图表
新图表对象创建需要指定div id
我的页面动态加载来自服务器的内容，而用户实际上从未离开页面
Fusion图表不允许在已包含图表的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）Chart Object和B）div Element。

只需注意：当内容部分更改且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() on它们。

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

示例：

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图表不允许在已经包含图表的div中创建第二个图表”，您已经有了解决方案：

在基于对象的构造函数参数中使用insertMode构造函数属性。可能的值是“替换”，“追加”，“前置”。

tyou可以尝试的例子：

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

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

3 个答案: