Question

我正在尝试将多级Sankey Google图表（https://developers.google.com/chart/interactive/docs/gallery/sankey）集成到Cognos Analytics自定义控件中，而JavaScript遇到了一些麻烦。

我已经检查过Google代码，并且在HTML文件中可以正常工作

<html>
<body>
 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<div id="sankey_multiple" style="width: 900px; height: 300px;"></div>

<script type="text/javascript">
  google.charts.load("current", {packages:["sankey"]});
  google.charts.setOnLoadCallback(drawChart);
   function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'From');
    data.addColumn('string', 'To');
    data.addColumn('number', 'Weight');
    data.addRows([
       [ 'Brazil', 'Portugal', 5 ],
       [ 'Brazil', 'France', 1 ],
       [ 'Brazil', 'Spain', 1 ],
       [ 'Brazil', 'England', 1 ],
       [ 'Canada', 'Portugal', 1 ],
       [ 'Canada', 'France', 5 ],
       [ 'Canada', 'England', 1 ],
       [ 'Mexico', 'Portugal', 1 ],
       [ 'Mexico', 'France', 1 ],
       [ 'Mexico', 'Spain', 5 ],
       [ 'Mexico', 'England', 1 ],
       [ 'USA', 'Portugal', 1 ],
       [ 'USA', 'France', 1 ],
       [ 'USA', 'Spain', 1 ],
       [ 'USA', 'England', 5 ],
       [ 'Portugal', 'Angola', 2 ],
       [ 'Portugal', 'Senegal', 1 ],
       [ 'Portugal', 'Morocco', 1 ],
       [ 'Portugal', 'South Africa', 3 ],
       [ 'France', 'Angola', 1 ],
       [ 'France', 'Senegal', 3 ],
       [ 'France', 'Mali', 3 ],
       [ 'France', 'Morocco', 3 ],
       [ 'France', 'South Africa', 1 ],
       [ 'Spain', 'Senegal', 1 ],
       [ 'Spain', 'Morocco', 3 ],
       [ 'Spain', 'South Africa', 1 ],
       [ 'England', 'Angola', 1 ],
       [ 'England', 'Senegal', 1 ],
       [ 'England', 'Morocco', 2 ],
       [ 'England', 'South Africa', 7 ],
       [ 'South Africa', 'China', 5 ],
       [ 'South Africa', 'India', 1 ],
       [ 'South Africa', 'Japan', 3 ],
       [ 'Angola', 'China', 5 ],
       [ 'Angola', 'India', 1 ],
       [ 'Angola', 'Japan', 3 ],
       [ 'Senegal', 'China', 5 ],
       [ 'Senegal', 'India', 1 ],
       [ 'Senegal', 'Japan', 3 ],
       [ 'Mali', 'China', 5 ],
       [ 'Mali', 'India', 1 ],
       [ 'Mali', 'Japan', 3 ],
       [ 'Morocco', 'China', 5 ],
       [ 'Morocco', 'India', 1 ],
       [ 'Morocco', 'Japan', 3 ]
    ]);

    // Set chart options
    var options = {
      width: 600,
    };

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.Sankey(document.getElementById('sankey_multiple'));
    chart.draw(data, options);
   }
</script>
</body>
</html>

这是我用于自定义控件的代码：

define( ["https://www.gstatic.com/charts/loader.js"], function() {
    "use strict";

    function Control(){
    };

    Control.prototype.initialize = function( oControlHost, fnDoneInitializing ){
        console.log('entra en initialize');
        this.m_oControlHost = oControlHost;
        fnDoneInitializing();
        console.log('sale de initialize');
    };


    Control.prototype.destroy = function( oControlHost )
    {
        this.m_oControlHost = null;
    };

    Control.prototype.getConfigurationValue = function( sName, sDefaultValue )
    {
        var o = this.m_oControlHost.configuration;
        return ( o && ( o[sName] !== undefined ) ) ? o[sName] : sDefaultValue;
    };


    Control.prototype.drawChart = function () {
        console.log('entra en drawChart');
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'From');
        data.addColumn('string', 'To');
        data.addColumn('number', 'Weight');
        data.addRows([
           [ 'Brazil', 'Portugal', 5 ],
           [ 'Brazil', 'France', 1 ],
           [ 'Brazil', 'Spain', 1 ],
           [ 'Brazil', 'England', 1 ],
           [ 'Canada', 'Portugal', 1 ],
           [ 'Canada', 'France', 5 ],
           [ 'Canada', 'England', 1 ],
           [ 'Mexico', 'Portugal', 1 ],
           [ 'Mexico', 'France', 1 ],
           [ 'Mexico', 'Spain', 5 ],
           [ 'Mexico', 'England', 1 ],
           [ 'USA', 'Portugal', 1 ],
           [ 'USA', 'France', 1 ],
           [ 'USA', 'Spain', 1 ],
           [ 'USA', 'England', 5 ],
           [ 'Portugal', 'Angola', 2 ],
           [ 'Portugal', 'Senegal', 1 ],
           [ 'Portugal', 'Morocco', 1 ],
           [ 'Portugal', 'South Africa', 3 ],
           [ 'France', 'Angola', 1 ],
           [ 'France', 'Senegal', 3 ],
           [ 'France', 'Mali', 3 ],
           [ 'France', 'Morocco', 3 ],
           [ 'France', 'South Africa', 1 ],
           [ 'Spain', 'Senegal', 1 ],
           [ 'Spain', 'Morocco', 3 ],
           [ 'Spain', 'South Africa', 1 ],
           [ 'England', 'Angola', 1 ],
           [ 'England', 'Senegal', 1 ],
           [ 'England', 'Morocco', 2 ],
           [ 'England', 'South Africa', 7 ],
           [ 'South Africa', 'China', 5 ],
           [ 'South Africa', 'India', 1 ],
           [ 'South Africa', 'Japan', 3 ],
           [ 'Angola', 'China', 5 ],
           [ 'Angola', 'India', 1 ],
           [ 'Angola', 'Japan', 3 ],
           [ 'Senegal', 'China', 5 ],
           [ 'Senegal', 'India', 1 ],
           [ 'Senegal', 'Japan', 3 ],
           [ 'Mali', 'China', 5 ],
           [ 'Mali', 'India', 1 ],
           [ 'Mali', 'Japan', 3 ],
           [ 'Morocco', 'China', 5 ],
           [ 'Morocco', 'India', 1 ],
           [ 'Morocco', 'Japan', 3 ]
        ]);

        // Set chart options
        var options = {
          width: 600
        };

        var chart = new google.visualization.Sankey(document.getElementById('sankey_multiple'));
        chart.draw(data, options);
        console.log('sale de drawChart');
    };

    Control.prototype.draw = function( oControlHost ){
        console.log('entra en draw');
        var elContainer = oControlHost.container;
        elContainer.innerHTML ='<div id="sankey_multiple" style="width: 900px; height: 300px;"></div>';

        google.charts.load('visualization', '1.1', {'packages': ['sankey']});
        google.charts.setOnLoadCallback( this.drawChart.bind(this));

        console.log('sale de draw');
    };

    Control.prototype.setData = function( oControlHost, oDataStore ){
        console.log('entra en setData');
        this.m_oDataStore = oDataStore;
        console.log('sale de setData');
    };

    return Control;
    });

运行报告时，什么都没有发生，但是如果调整浏览器窗口的大小，则会出现此错误，我不知道如何解决：

错误：匿名define（）模块不匹配：函数（exports，d3Array，d3Collection，d3Shape）{'使用严格'; ...

谢谢。

如何将Sankey GoogleChart集成到Custom Control Cognos Analytics中

0 个答案: