Проблема с тем, что Highcharts не отображаются в шаблоне Durandal/Hot Towel

Мы используем HighCharts.js в шаблоне Durandal/Hot Towel в ASP.NET MVC 4. Мы просто показываем доказательство концепции использования API построения диаграмм для страницы информационной панели. Однако график не отображается на странице во время загрузки страницы.

У нас есть собственный файл .js, содержащий следующий код (скопированный и вставленный с HighCharts.com):

$(document).ready(function () {
    $('#reportgraph').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Fruit Consumption'
        },
        xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
        },
        yAxis: {
            title: {
                text: 'Fruit eaten'
            }
        },
        series: [{
            name: 'Jane',
            data: [1, 0, 4]
        }, {
            name: 'John',
            data: [5, 7, 3]
        }]
    });
});

И div в представлении HTML, который отображается правильно:

<div class="row-fluid">
     <div class="span12">
          <div class="widget">
               <div class="widget-header">
                    <div class="title">Highcharts</div>
               </div>
               <div class="widget-body">
                    <div id="reportgraph" style="width:100%"></div>
               </div>
          </div>
     </div>
</div>

Сборщик скриптов содержит следующие файлы:

.Include("~/Scripts/jquery-1.9.1.min.js")
.Include("~/Scripts/highcharts.js")
.Include("~/Scripts/custom.js")
.Include("~/Scripts/bootstrap.js")
.Include("~/Scripts/knockout-{version}.debug.js")
.Include("~/Scripts/sammy-{version}.js")
.Include("~/Scripts/toastr.js")
.Include("~/Scripts/Q.js")
.Include("~/Scripts/breeze.debug.js")
.Include("~/Scripts/moment.js"));

Тем не менее, график не отображается. Мне удалось успешно отобразить график в приложении Bootstrap, работая с перечисленными выше сценариями.

Есть ли дополнительный шаг, который необходимо выполнить для работы с функциями внутри операторов document.ready в одностраничном приложении?

Заранее спасибо!


single-page-application asp.net-mvc-4 highcharts durandal hottowel
person doodelicious    schedule 25.06.2013    source источник

Ответы (1)


arrow_upward
3
arrow_downward

В типичном приложении Durandal нет необходимости использовать готовый документ, поскольку в этот момент отображается только содержимое index.html (applicationHost). Все остальное внедряется в DOM с помощью композиции Дюрандаля.

Для работы с этими составленными фрагментами DOM добавьте обратный вызов viewAttached в vm, который сопровождает HTML-представление. viewAttached получает составное представление, переданное в качестве параметра, которое следует использовать для ограничения селектора jQuery.

function viewAttached(view) {
    $('#reportgraph', view).highcharts({
        ...
    });
};

В большинстве случаев этого должно быть достаточно для работы плагинов jQuery. Однако в Durandal 1.2 viewAttached просто гарантирует, что составной фрагмент будет присоединен к его родительскому элементу, а не обязательно к DOM, поэтому вам придется проверить, достаточно ли этого для работы highcharts. Эта проблема будет решена в грядущем Durandal 2.0 путем введения -call">documentAttached обратный вызов.

person RainerAtSpirit    schedule 25.06.2013
comment
RainerAtSpirit - спасибо за быстрый ответ. Вы были правы, мы реализовали вызов в вызове функции viewAttached(view) {}, и он успешно сработал. - person doodelicious; 25.06.2013
comment
@RainerAtSpirit, а если элемент highcharts нужно обновить с помощью нового источника данных? например, у меня есть несколько раскрывающихся списков, на мой взгляд, которые заставляют перезагружать мою диаграмму в соответствии с выбором. Спасибо! - person Rolando; 07.07.2014