Пользовательская привязка нокаута для API Google Chart - доступ запрещен

Question

Я пытался сделать это в течение пары дней, а также поиском готового решения, но, к сожалению, безуспешно.

Я создаю раздел администратора для индивидуального продукта электронной коммерции. Эта область администрирования полностью построена как SPA (одностраничное приложение), которое динамически загружает шаблоны 'ko' и их данные, оба через вызовы AJAX.

Теперь проблема заключается в том, что я хотел бы включить диаграммы, круговые диаграммы и другие элементы визуализации данных в эти шаблоны КО (т. Е. Суммированные данные, красиво отображаемые на графике в шаблоне панели мониторинга).

Для этого я работаю над "KO Custom Binding" для Google Chart API, который вызывается правильно.

Это то, что у меня есть до сих пор, это создает фиксированный график (адаптированный к KO из: этого примера)

ko.bindingHandlers.googleChart = {
init: function (element, valueAccessor, allBindingsAccesor, viewModel, bindingContext) {

    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(function () {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Year');
        data.addColumn('number', 'Revenue');
        data.addColumn('number', 'Average Revenue');
        data.addRows([
          ['2004', 1000, 630],
          ['2005', 1170, 630],
          ['2006', 660, 630],
          ['2007', 1030, 630]
        ]);

        var options = {
            title: 'Revenue by Year',
            seriesType: "bars",
            series: { 1: { type: "line" } },
            vAxis: {
                title: 'Year',
                titleTextStyle: { color: 'red' }
            },
            colors: ['red', 'black']
        };

        var chart = new google.visualization.ComboChart($(element));
        chart.draw(data, options);
    });
}};

Затем из шаблона я вызываю привязку, передавая "ложь" на данный момент, или любой фиктивный объект ko.observable из viewModel.

<script type="text/html" id="dashboard-admin-template">
    <div data-bind="googleChart: false"></div>    
</script>

Теперь, наконец (извините, что это заняло так много времени), у меня возникла проблема:

После, google.load("visualization", "1", { packages: ["corechart"] });содержимое элемента становится недоступным (не могу опубликовать захват из моей IDE, так как я новичок в вопросах репутации), что приводит к сбою обратного вызова и не отображает диаграмму. Содержимое элемента доступно и доступно до вызова google.load. Тогда получаю Javascript runtime error: Access is denied когда обратный вызов вызывается.

Надеюсь получить помощь, так как я застрял на этом. Спасибо! Луис

Answer 1

Позвольте мне переформулировать правильный ответ.

1. Возьмите google.load("visualization"... из пользовательского кода привязки
2. Избегайте звонить google.setOnLoadCallback(function()... выполнение внутреннего кода непосредственно само по себе.

Вот как выглядит привязка сейчас...

google.load("visualization", "1", { packages: ["corechart"] });
ko.bindingHandlers.googleChart = {
init: function (element, valueAccessor, allBindingsAccesor, viewModel, bindingContext) {

    //TODO: load & handle visualization data using the 'valueAccessor'

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Year');
    data.addColumn('number', 'Revenue');
    data.addColumn('number', 'Average Revenue');
    data.addRows([
        ['2004', 1000, 630],
        ['2005', 1170, 630],
        ['2006', 660, 630],
        ['2007', 1030, 630]
    ]);

    var options = {
        title: 'Revenue by Year',
        seriesType: "bars",
        series: { 1: { type: "line" } },
        vAxis: {
            title: 'Year',
            titleTextStyle: { color: 'red' }
        },
        colors: ['red', 'black']
    };

    var chart = new google.visualization.ComboChart(element);
    chart.draw(data, options);
}};

Надеюсь, это поможет любому из вас, кто работает над подобным вопросом!