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

Question

Как интегрировать FusionChart в мое приложение SPA, разработанное с использованием архитектуры MVVM, Durandal и Knockout.js? Я создал простой HTML-файл с жестко закодированными данными, в которых графики работают нормально, но я не могу понять, как я могу вставлять этот код с помощью моего приложения SPA.

Я делюсь некоторые детали:

Я добавил следующее Js файл в моем HTML-файл:

<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.

Пожалуйста, помогите.

Answer 1

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

https://github.com/bhargav3/fcdurandal

Первая вещь включить 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"); 

     } 
    } 
}; 

});

Где в качестве зрения будет выглядеть

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

main.js является загрузочный файл, и вы можете добавить свои маршрутизаторы (для навигации) там.

Answer 2

Если ваши файлы JavaScript добавлены через теги script на index.html, то диаграммы Fusion должны быть доступны для использования с вашей моделью просмотра. Существует способ использования 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>