Mvvm 如何将FusionChart集成到使用Durandal和Knockout开发的SPA应用程序中？

如何将FusionChart集成到使用MVVM体系结构、Durandal和Knockout.js开发的SPA应用程序中？我创建了一个简单的HTML文件，其中包含硬编码数据，其中的图表运行良好，但我不知道如何将此代码嵌入SPA应用程序

我分享一些细节：

我在HTML文件中添加了以下Js文件：

<script type="text/javascript" src="./FusionCharts.js"></script>
<script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="./lib.js"></script>

成功呈现fusion图表的HTML文件代码如下：

<div id="chartdiv" align="center">Chart will load here</div>
<script type="text/javascript">
    var chart = new FusionCharts("Column3D", "myChartId", "300", "200");
    chart.setXMLData("<chart animation='0' caption='Aging' numberPrefix='$'      showBorder='1'>" +
                            "<set label='Current' value='24000' color='00FF00' />" +
                            "<set label='30+' value='19600' color='0000FF' />" +
                            "<set label='60+' value='15700' color='FFFF00'/>" +
                            "<set label='90+' value='14400' color='FF0000' />" +
                            "<styles>" +
                            "<definition>" +
                            "<style name='myCaptionFont' type='font' align='right'/>" +
                            "</definition>" +
                            "<application>" +
                            "<apply toObject='Caption' styles='myCaptionFont' />" +
                            "</application>" +
                            "</styles> " +
                            "</chart>");
    chart.render("chartdiv");
</script> 

图表将在此处加载
var图表=新的FusionCharts（“Column3D”、“myChartId”、“300”、“200”）；
chart.setXMLData（“”）+
"" +
"" +
"" +
"" +
"" +
"" +
"" +
"" +
"" +
"" +
"" +
" " +
"");
chart.render（“chartdiv”）；

我无法确定ViewModel.js和view.html文件中的代码应该是什么来呈现FusionChart

---

请提供帮助。

如果您的JavaScript文件是通过index.html上的脚本标记添加的，那么应该可以从视图模型中使用Fusion图表。有一种方法可以利用require.js动态加载到视图模型的范围中，如果您不希望全局加载它的话。为了使演示viewAttached的使用更加简单，我没有在视图模型示例中包含以下内容

viewAttached（）似乎是生命周期中调用的最后一个方法。如文档所示，该方法指示“视图连接到父DOM节点”的时间。这应该允许您在绑定发生后根据需要操纵视图。另见：

以下是在视图模型中使用viewAttached的示例：

define(function() {
    var activate = function() {

    };

    var viewAttached = function() {
        var chart = new FusionCharts("Column3D", "myChartId", "300", "200");
        chart.setXMLData("<chart animation='0' caption='Aging' numberPrefix='$'   showBorder='1'>" +
                        "<set label='Current' value='24000' color='00FF00' />" +
                        "<set label='30+' value='19600' color='0000FF' />" +
                        "<set label='60+' value='15700' color='FFFF00'/>" +
                        "<set label='90+' value='14400' color='FF0000' />" +
                        "<styles>" +
                        "<definition>" +
                        "<style name='myCaptionFont' type='font' align='right'/>" +
                        "</definition>" +
                        "<application>" +
                        "<apply toObject='Caption' styles='myCaptionFont' />" +
                        "</application>" +
                        "</styles> " +
                        "</chart>");
        chart.render("chartdiv");            
    };

    return {
        activate: activate,
        viewAttached: viewAttached
    };
};

define（函数（）{
var activate=function（）{
};
var viewAttached=函数（）{
var图表=新的FusionCharts（“Column3D”、“myChartId”、“300”、“200”）；
chart.setXMLData（“”）+
"" +
"" +
"" +
"" +
"" +
"" +
"" +
"" +
"" +
"" +
"" +
" " +
"");
chart.render（“chartdiv”）；
};
返回{
激活：激活，
viewAttached:viewAttached
};
};

最后，您的视图应该包含：

<div id="chartdiv" align="center">Chart will load here</div>

图表将在此处加载

如果您的JavaScript文件是通过index.html上的脚本标记添加的，那么应该可以从您的视图模型中使用Fusion图表。如果出于某种原因您不希望全局加载到视图模型的范围中，那么有一种方法可以利用require.js来动态加载到视图模型的范围中。我没有在下面的视图模型示例中列出这一点为了使演示viewAttached的使用保持简单

viewAttached（）似乎是生命周期中调用的最后一个方法。如文档所示，该方法指示何时“将视图附加到父DOM节点”。这应允许您在绑定发生后根据需要操纵视图。另请参阅：

以下是在视图模型中使用viewAttached的示例：

define(function() {
    var activate = function() {

    };

    var viewAttached = function() {
        var chart = new FusionCharts("Column3D", "myChartId", "300", "200");
        chart.setXMLData("<chart animation='0' caption='Aging' numberPrefix='$'   showBorder='1'>" +
                        "<set label='Current' value='24000' color='00FF00' />" +
                        "<set label='30+' value='19600' color='0000FF' />" +
                        "<set label='60+' value='15700' color='FFFF00'/>" +
                        "<set label='90+' value='14400' color='FF0000' />" +
                        "<styles>" +
                        "<definition>" +
                        "<style name='myCaptionFont' type='font' align='right'/>" +
                        "</definition>" +
                        "<application>" +
                        "<apply toObject='Caption' styles='myCaptionFont' />" +
                        "</application>" +
                        "</styles> " +
                        "</chart>");
        chart.render("chartdiv");            
    };

    return {
        activate: activate,
        viewAttached: viewAttached
    };
};

define（函数（）{
var activate=function（）{
};
var viewAttached=函数（）{
var图表=新的FusionCharts（“Column3D”、“myChartId”、“300”、“200”）；
chart.setXMLData（“”）+
"" +
"" +
"" +
"" +
"" +
"" +
"" +
"" +
"" +
"" +
"" +
" " +
"");
chart.render（“chartdiv”）；
};
返回{
激活：激活，
viewAttached:viewAttached
};
};

最后，您的视图应该包含：

<div id="chartdiv" align="center">Chart will load here</div>

图表将在此处加载

我开发了一个在DurandalJS中包含FusionCharts的工作演示。只需将项目复制到Web服务器并访问该应用程序即可

第一件事是包含fusioncharts.js，可以使用requirejs或直接将其添加到索引文件中。为了避免创建重复的图表，我们将检查fusioncharts（“myChartId”）是否存在，并避免重画

您的viewmodel将如下所示

define(['durandal/http', 'durandal/app'], function() {
return {
    displayText: 'FusionCharts in a SPA app!',
    viewAttached: function(view) {

        if (typeof FusionCharts('myChartId') === 'undefined') {
            $('#binder').append('<div id="chartContainer"></div>');
            var myChart = new FusionCharts("Column3D", "myChartId", "400", "300", "0");
            myChart.setXMLData("<chart animation='0' caption='Aging' numberPrefix='$'      showBorder='1'>" +
                    "<set label='Current' value='24000' color='00FF00' />" +
                    "<set label='30+' value='19600' color='0000FF' />" +
                    "<set label='60+' value='15700' color='FFFF00'/>" +
                    "<set label='90+' value='14400' color='FF0000' />" +
                    "</chart>");
            myChart.render("chartContainer");

        }
    }
};

define（['durandal/http'，'durandal/app']，function（））{
返回{
displayText:“SPA应用程序中的FusionCharts！”，
视图附加：功能（视图）{
if（FusionCharts（'myChartId'）的类型='undefined'）{
$（“#活页夹”）。追加（“”）；
var myChart=新的FusionCharts（“Column3D”、“myChartId”、“400”、“300”、“0”）；
myChart.setXMLData（“”）+
"" +
"" +
"" +
"" +
"");
myChart.render（“chartContainer”）；
}
}
};

}))

你的观点会是什么样子

<h2 data-bind="html:displayText"></h2>
<div id="binder"></div>  

---

main.js是引导文件，您可以在那里添加路由器（用于导航）。

我开发了一个在DurandalJS中包含FusionCharts的工作演示。只需将项目复制到Web服务器并访问该应用程序即可

第一件事是包含fusioncharts.js，可以使用requirejs或直接将其添加到索引文件中。为了避免创建重复的图表，我们将检查fusioncharts（“myChartId”）是否存在，并避免重画

<