Как я могу интегрировать FusionChart в свое приложение SPA, разработанное с использованием Durandal и Knockout?

Я разработал рабочую демонстрацию для включения FusionCharts в DurandalJS. Просто скопируйте проект на веб-сервер и получите доступ к приложению.

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 — это файл начальной загрузки, и вы можете добавить туда свои маршрутизаторы (для навигации).

Если ваши файлы JavaScript добавляются с помощью тегов script в 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>