1

MVVM アーキテクチャ、Durandal、Knockout.js を使用して開発した SPA アプリケーションに FusionChart を統合するにはどうすればよいですか? ハードコードされたデータを含む単純な 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>

FusionChart をレンダリングするために、ViewModel.js と view.html ファイルのコードがどうあるべきかわかりません。

助けてください。

4

2 に答える 2

4

DurandalJS に FusionCharts を含めるための実用的なデモを開発しました。プロジェクトを Web サーバーにコピーして、アプリにアクセスするだけです。

https://github.com/bhargav3/fcdurandal

最初に、requirejs を使用するか、index ファイルに直接追加することで、fusioncharts.js をインクルードします。重複したチャートの作成を避けるために、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はブートストラップ ファイルであり、そこに (ナビゲーション用の) ルーターを追加できます。

于 2013-08-07T10:24:24.300 に答える
3

JavaScript ファイルが index.html のスクリプト タグを介して追加されている場合は、Fusion Charts をビュー モデルから使用できるようにする必要があります。グローバルに必要としない理由がある場合は、require.js を使用してビュー モデルのスコープに動的にロードする方法があります。viewAttached の使用方法を簡単に示すために、以下のビュー モデルの例にはそれを含めませんでした。

viewAttached ( http://durandaljs.com/documentation/Hooking-Lifecycle-Callbacks/ ) は、ライフサイクルで呼び出される最後のメソッドのようです。ドキュメントに示されているように、メソッドは「ビューが親 DOM ノードにアタッチされたとき」を示します。これにより、バインディングが発生した後、必要に応じてビューを操作できるようになります。参照: http://durandaljs.com/documentation/Interacting-with-the-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
    };
};

最後に、ビューには以下が含まれている必要があります。

<div id="chartdiv" align="center">Chart will load here</div>
于 2013-08-07T03:18:05.800 に答える