0

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

  1. 在javascript中,一个新的图表被实例化
  2. 新建图表对象需要指定一个 div id
  3. 我的页面从服务器动态加载内容,而用户实际上从未离开页面
  4. Fusion Charts 不允许在已经有图表的 div 中创建第二个图表
  5. 话虽如此,我需要预先定义每一个可能的图表,即使它的父内容页面尚未加载,并在页面加载时实例化它。
  6. 更进一步,为了创建这些图表“对象”,我需要已经为每个特定图表指定了一个 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 元素在被清除时与页面内容一起被删除(被其他动态页面内容替换)。

4

3 回答 3

2

您可以采用的另一种方法是为每个图表创建一个新的 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 获取元素,它应该可以正常工作..

于 2012-03-28T08:34:00.540 回答
1

解决您的问题的一个很酷的方法是在页面加载之前继续实例化图表,就像您现在所做的那样。但是,将构造函数参数修改为对象样式表示法。在对象式构造中,您可以预先指定将呈现图表的 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 文档中 JavaScript中的构造方法以了解有关对象样式表示法的更多信息。

于 2012-03-28T10:24:07.047 回答
1

如果您正在为此寻找解决方案:“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"
    });
于 2012-03-28T10:24:54.527 回答