在 Cognos Analytics 11 报告中使用 MermaidJS

Question

我正在尝试使用 MermaidJS 在我的 Cognos 11 报告中构建动态甘特图，但它一直返回错误：“Uncaught ReferenceError: mermaidAPI is not defined” 浏览器似乎找不到我对Mermaid 库，但除了通过 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;
});

Answer 1

尝试改变这一行

$('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});
    });

到这里

$.getScript( "https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js", function( data, textStatus, jqxhr ) {
  console.log( "Load was performed." );
   mermaid.initialize({startOnLoad:false});
});