Thingworx Gantt Chart error as "TypeError: Cannot read property 'ActualDataRows' of undefined"

Question

我正在使用 PTC Marketplace 的甘特图扩展。当我配置运行混搭时，它给出错误 "TypeError: Cannot read property 'ActualDataRows' of undefined at resize"。（请参考下面的代码和附加的图像文件）。我 this.resize 函数抛出错误，因为 thisWidget.lastData 未定义。由于我是 JavaScript 的新手，因此我无法解决此错误。你们能帮帮我吗

谢谢

(function () {

TW.Runtime.Widgets.ganttChart = function () {
    var thisWidget = this; 
    var currentlySelectedRow = undefined;

    this.runtimeProperties = function () {
        return {
            'needsDataLoadingAndError': true,
            'supportsAutoResize': true,
        'propertyAttributes': {
            }
        };
    };

    this.renderHtml = function () {
    if (this.properties.ResponsiveLayout === true ) {
        widgetWidth = '100%';
        widgetHeight = '100%';
    } else {
        widgetWidth = this.getProperty("Width");
        widgetHeight = this.getProperty("Height");
    }
        var html = '<div class="widget-content widget-ganttChart"><div id = "chart_div" width=' + widgetWidth + ' height=' + widgetHeight + '> </div></div>';
        return html;
    };


    this.loadChart = function (rows, taskId, taskName, startDate, endDate, resource, relationships, duration, percentage) {
         google.charts.load('current', {'packages':['gantt']});
         google.charts.setOnLoadCallback(drawChart);

         function drawChart() {
        var data = new google.visualization.DataTable();
         data.addColumn('string', 'Task ID');
         data.addColumn('string', 'Task Name');
         data.addColumn('string', 'Resource');
         data.addColumn('date', 'Start Date');
         data.addColumn('date', 'End Date');
         data.addColumn('number', 'Duration');
         data.addColumn('number', 'Percent Complete');
         data.addColumn('string', 'Dependencies');

         var trackStyle = TW.getStyleFromStyleDefinition(thisWidget.getProperty('TrackStyle', 'DefaultGanttTrackStyle'));
         var altTrackStyle = TW.getStyleFromStyleDefinition(thisWidget.getProperty('AlternativeTrackStyle', 'DefaultAlternativeGanttTrackStyle'));
         var arrowStyle = TW.getStyleFromStyleDefinition(thisWidget.getProperty('ArrowStyle', 'DefaultGanttArrowStyle'));

         var trackFill = trackStyle.backgroundColor; 
         var altTrackFill = altTrackStyle.backgroundColor;
         var arrowColor = arrowStyle.lineColor; 
         var arrowWidth = arrowStyle.lineThickness;

         for (var i = 0; i < rows.length; i++) {
             var row = rows[i];

              data.addRows([
                [row[taskId], row[taskName], row[resource],
                new Date(row[startDate]), new Date(row[endDate]), row[duration], row[percentage], row[relationships]]
              ]);
         }
         var barHeight = thisWidget.getProperty('ItemHeight');
         var chartHeight = rows.length *  barHeight + 50; 
         var itemHeight = barHeight - 5;
         var cornerRadius = thisWidget.getProperty('BarCornerRadius');
         var percentEnabled = thisWidget.getProperty('ShowPercentCompletion');
         var arrowRadius = thisWidget.getProperty('ArrowRadius');
         var arrowAngle = thisWidget.getProperty('ArrowAngle');
          var options = {
              width: "100%",
              height: chartHeight,
              gantt: {
                   barHeight: itemHeight,
                   trackHeight: barHeight, 
                   barCornerRadius: cornerRadius,
                   arrow: { angle:arrowAngle, length: 5, spaceAfter: 5, radius: arrowRadius, color: arrowColor, width: arrowWidth},
                   innerGridTrack: {fill: trackFill },
                   innerGridDarkTrack: {fill: altTrackFill},
                   percentEnabled : percentEnabled                     
                }
            };

            var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

            chart.draw(data, options);

            google.visualization.events.addListener(chart, 'select', function(e) {
                var selection = chart.getSelection(); 
                if (selection[0] != undefined && selection[0] != null) 
                    thisWidget.handleRowSelection (selection[0].row);
            });

         }
    };

    this.afterRender = function () { };


    this.handleSelectionUpdate = function (propertyName, selectedRows, selectedRowIndices) {
        var domElementId = this.jqElementId;
        var widgetElement = this.jqElement;
        var widgetProperties = this.properties;

        if (propertyName == "Data") {
            var widgetProperties = this.properties;

            var idField = widgetProperties['TaskID'];

            thisWidget.ignoreSelectionEvent = true;

            var nSelectedRows = selectedRows.length;

            if (nSelectedRows > 0) {
                for (var x = 0; x < nSelectedRows; x++) {
                    if (selectedRows[x]._isSelected === true) {
                        thisWidget.handleRowSelection(selectedRows[x]["_row_"]);
                        thisWidget.ignoreSelectionEvent = false;
                        break;
                    }
                }
            } else
                thisWidget.handleRowSelection(undefined);

            thisWidget.ignoreSelectionEvent = false;
        }

    };

    this.handleRowSelection = function (selectedRowNo) {
        if (selectedRowNo !== undefined) {
            var selectedRows = [selectedRowNo];

            if (!thisWidget.ignoreSelectionEvent) {
                thisWidget.updateSelection('Data', selectedRows);
            }
        }

        thisWidget.currentlySelectedRow = selectedRowNo;
    };

  this.handleItemClick = function (d) {
        thisWidget.handleRowSelection(d["_row_"]);
    };

  this.assignRowNumbers = function (rows) {
        var rowid;

        for (rowid in rows) {
            var row = rows[rowid];
            row["_row_"] = rowid;
        }
    };

    this.updateProperty = function (updatePropertyInfo) {
        var widgetProperties = this.properties;

        if (updatePropertyInfo.TargetProperty === "Data") {
            thisWidget.lastData = updatePropertyInfo;

            var rows = updatePropertyInfo.ActualDataRows;

            this.assignRowNumbers(rows);

            var taskName = widgetProperties['TaskName'];
            var taskId = widgetProperties['TaskID'];
            var startDate = widgetProperties['StartDate'];
            var endDate = widgetProperties['EndDate'];
            var resource = widgetProperties['Resource'];
            var relationships = widgetProperties['Relationships'];
            var duration = widgetProperties['Duration'];
            var percentage = widgetProperties['Percentage'];

            this.loadChart(rows, taskId, taskName, startDate, endDate, resource, relationships, duration, percentage);

            var selectedRowIndices = updatePropertyInfo.SelectedRowIndices;

            if (selectedRowIndices !== undefined) {
                if (selectedRowIndices.length > 0) {
                    var selectedRows = new Array();
                    selectedRows.push(rows[selectedRowIndices[0]]);
                    setTimeout(function () {
                        thisWidget.handleSelectionUpdate("Data", selectedRows, selectedRowIndices);
                    }, 100);
                } else {
                    setTimeout(function () {
                        thisWidget.handleSelectionUpdate("Data", [], []);
                    }, 100);
                }
            } else {
                setTimeout(function () {
                    thisWidget.handleSelectionUpdate("Data", [], []);
                }, 100);
            }

            if (this.SelectedValuePending !== undefined) {
                this.selectItem(this.SelectedValuePending);
                this.SelectedValuePending = undefined;
            }

        } else if (updatePropertyInfo.TargetProperty === "SelectedValue") {
            var selectedItem = updatePropertyInfo.SinglePropertyValue;

            var dataPropertyInfo = thisWidget.lastData;

            if (dataPropertyInfo != undefined) {
                this.selectItem(selectedItem);
            } else {
                this.SelectedValuePending = selectedItem;
            }
        }
    };

    this.beforeDestroy = function () {

    };
    this.resize =  function () {

        var taskName = thisWidget.getProperty('TaskName');
        var taskId = thisWidget.getProperty('TaskID');
        var startDate = thisWidget.getProperty('StartDate');
        var endDate = thisWidget.getProperty('EndDate');
        var resource = thisWidget.getProperty('Resource');
        var relationships = thisWidget.getProperty('Relationships');
        var duration = thisWidget.getProperty('Duration');
        var itemHeight = thisWidget.getProperty("ItemHeight");
        var percentage = thisWidget.getProperty("Percentage");

        var rows = thisWidget.lastData.ActualDataRows; //here throwing error

        thisWidget.loadChart(rows, taskId, taskName, startDate, endDate, resource, relationships, duration, percentage); 
    };
    window.addEventListener("resize", this.resize);
};} ());

Answer 1

这个问题是因为我没有将触发事件分配给用于甘特图的数据服务。在这种情况下，将 'Mashup Loaded' 触发事件分配给数据服务。

谢谢

Thingworx Gantt Chart error as "TypeError: Cannot read property 'ActualDataRows' of undefined"

Thingworx Gantt Chart error as "TypeError: Cannot read property 'ActualDataRows' of undefined"

javascript

custom-widgets

thingworx