如何将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>

成功显示融合图的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> 

我无法弄清楚ViewModel.js和view.html文件中呈现FusionChart的代码应该是什么。

请帮忙。

巴尔加夫(Bhargav Nanekalva)

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

https://github.com/bhargav3/fcdurandal

首先要包括Fusioncharts.js,可以使用requirejs或直接将其添加到索引文件中来完成。为避免创建重复的图表,我们将检查FusionCharts('myChartId')是否存在并避免重绘。

您的视图模型将如下所示:

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

        }
    }
};

});

您的视图将显示在哪里

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

main.js是引导文件,您可以在其中添加路由器(用于导航)。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何将Paytm钱包集成到Android应用程序中?

如何将独立的Python脚本集成到Rails应用程序中?

如何将BIRT日志集成到应用程序日志中?

如何将Twitter Bootstrap集成到ember-cli应用程序中?

如何将Paytm钱包集成到Android应用程序中?

如何将Angular 2应用程序集成到Django应用程序中

如何将Disqus集成到Aurelia应用程序?

如何将CCAvenue集成到Ionic应用程序?

如何将Samsung Gear Steps集成到android应用程序中?

如何将Prism 7 WPF集成到旧的大型WinForms应用程序中

如何将OPEN_APP_FEATURE操作集成到Android应用程序中?

如何将React应用程序集成到Wordpress(反应路由器)中?

如何将EmberJS逐步集成到Rails Web应用程序中?

我们如何将Captcha集成到iOS应用程序中?

如何将PayPal功能集成到桌面应用程序中

Django:如何将Django Rest框架集成到现有应用程序中?

如何将Gmail登录信息集成到Android应用程序中?

如何将现有的angular js应用程序集成到Laravel 5中

如何将RequireJS模块集成到AngularJS应用程序中?

如何将qml文件集成到qt-widgets应用程序中?

Citrus SplitPay:如何将Split Pay集成到移动应用程序中

如何将Mustache模板引擎集成到Phalcon PHP应用程序中?

如何将laravel软件包集成到应用程序中

如何将新的 ionic 主题集成到现有的 ionic 应用程序中?

如何将 Zoom 集成到 reactjs 应用程序中?

如何将 HTML 模板中的 css/js 集成到 Laravel 应用程序中?

如何将代码集成到闪亮的应用程序中并上传文件?

如何将 Google Analytics 集成到您的 Nuxt.js 应用程序中

我可以将 React 集成到 Knockout JavaScript 应用程序中吗?