javascript - Cognos Analytics 11 レポートでの MermaidJS の使用

Question

MermaidJS を使用して Cognos 11 レポートでダイナミック ガント チャートを作成しようとしていますが、「Uncaught ReferenceError: mermaidAPI が定義されていません」というエラーが返され続けます。 JavaScriptを介してヘッダーに追加する以外に、それを参照する方法がわかりません。

私のブラウザが好きではない人魚ライブラリを参照することで何が間違っていますか? 私のJSモジュールは次のとおりです。

define( ['jquery'], function($) {

    $('head').append('<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>');
    console.log('appended to head');

    $(document).ready(function() {
        console.log('document load');
        mermaid.initialize({startOnLoad:false});
    });

    function ListToGantt() {
    };

    ListToGantt.prototype.draw = function( oControlHost ) {
        console.log( "PageModule.draw" );

        var oConfig = oControlHost.configuration;
        var table = oControlHost.page.getControlByName(oConfig.name);

        var el = oControlHost.container;
        el.innerHTML +=
            '<div id="mermaidContainer" class="mermaid">' +
            'gantt' +
            '   title EDW Daily Build Gantt Diagram' +
            '   dateFormat  MMM DD YYYY hh:mm:ss A' +
            '   axisFormat  %H:%M %p' +
            '   section 30 Day Avg' +
            '   A task           :a1, Jan 01 2014 01:00:30 am, 30m' +
            '   Another task     :after a1, 20m' +
            '   section Latest Build' +
            '   Task in sec      :Jan 01 2014 01:01:30 am, 12m' +
            '   another task      : 24m' +
            '</div>';

        ///Start of method      
        var tableArr = [];
        // LOOP THROUGH EACH ROW OF THE TABLE AFTER HEADER.
        for (var i = 0; i < table.element.rows.length; i++) {

            // GET THE CELLS COLLECTION OF THE CURRENT ROW.
            var tableRows = table.element.rows[i];
            var tempArray = [];
            // LOOP THROUGH EACH CELL OF THE CURENT ROW TO READ CELL VALUES.
            for (var j = 0; j < tableRows.cells.length; j++) {
                tempArray[j] = tableRows.cells[j].lastChild.innerText;
                //info.innerHTML = info.innerHTML + ' ' + tableRows.item(j).innerHTML;
            }
            tableArr[i] = tempArray;
        }
        console.log(tableArr);
        ///End of method;

    };

    return ListToGantt;
});