如何在 Service Now 中增加 Performance Analytics 小部件的大小？

问题描述

我是 ServiceNow 门户的新手，我正在尝试增加性能分析小部件中仪表的大小。前两个仪表来自报告小部件。它看起来很适合列。但是底部的小部件太小了。如何增加尺寸？

小部件 HTML

<div class="pa-widget-service-portal__parent-container">
<div class="pa-widget-service-portal" role="group">
    <h2 class="title-container "
        id="{{'title-' + c.titleId}}"
        ng-class="{ show: c.showTitle }">
        {{::c.title}}
    </h2>
    <div class="initial-message-container" ng-class="{ show: c.initialMessageVisible }">
        {{::c.initialMessage}}
    </div>
    <div class="react-component" ng-if="c.reactComponent">
        <pa-react-wrapper
            type="{{::c.widgetRoute}}"
            uuid="{{::c.uuid}}"
            widget-id="{{::c.widgetId}}"
            lang={{::c.lang}}
            dow={{::c.dow}}
            visualization={{::c.visualization}}
            insights-Enabled={{::c.insightsEnabled}}
            text-cutoff-value={{::c.cutoffValue}}
            text-cutoff-type={{::c.cutoffType}}
            text-cutoff-condition={{::c.cutoffCondition}}
            text-limit={{::c.textLimit}}
            text-default-field={{::c.defaultField}}
            text-words-trendline-limit={{::c.textWordsInTrendline}}>
        </pa-react-wrapper>
    </div>
</div>

小部件客户端脚本

function paSPClientController($compile,$element,$scope,$http,$timeout) {
/* widget controller */
var c = this;

// Initial message
c.initialMessageVisible = !Boolean(c.options.widget_id);
c.initialMessage = c.data.i18n.initialMessage;

// Title
c.title = '';
c.showTitle = (c.options.show_title && c.options.show_title !== 'false');
if (c.options.widget_parameters) {
    var widgetParameters = JSON.parse(c.options.widget_parameters);
    if (typeof widgetParameters.widget_id === 'object')
        c.title = widgetParameters.widget_id.displayValue;
}

//PA messages
if (!top.SNC.PA.msg || $.isEmptyObject(top.SNC.PA.msg)) {
    top.SNC.PA.msg = JSON.parse(c.data.i18n.paMsgs);
}

var httpOptions = {
    url: 'angular.do',params: {
        sysparm_type: 'pa_widget',type: 'getwidgetserviceportal',widget: c.options.widget_id
    }
};
$http(httpOptions,true).then(function afterResponse(result) {
    if (!result.data.type || !result.data.sys_id)
        return;
    
    c.initialMessageVisible = false;
    if (c.showTitle)
        c.titleId = result.data.sys_id;
    
    var compiledWidget;
    if (isReactWidget(result.data.type,result.data.newVisualizationEnabled)) {
        // Text Analytics Widget is in React
        c.widgetId = result.data.sys_id;
        c.uuid = result.data.uuid;
        c.reactComponent = true;
        c.lang = c.data.language;
        c.dow = c.data.dow;
        c.cutoffValue = result.data.text_cut_off_value;
        c.cutoffType = result.data.text_cut_off_type;
        c.cutoffCondition = result.data.text_cut_off_condition;
        c.defaultField = result.data.text_default_field;
        c.textLimit = result.data.text_limit;
        c.visualization = result.data.visualization;
        c.textWordsInTrendline = result.data.text_words_in_trendline;
        c.type = result.data.type;
        c.insightsEnabled = result.data.insightsEnabled;
        switch(c.type) {
            case 'text': c.widgetRoute = '/widgets/text-analytics'; break;
            case 'insight': c.widgetRoute = '/widgets/insights'; break;
            case 'time': c.widgetRoute = '/widgets/time-series'; break;
            case 'score': c.widgetRoute = '/widgets/single-score'; break;
            default: c.widgetRoute = '/widgets/text-analytics'; break;
        }
        
        $timeout(function afterangularRender() {
            var element = angular.element('pa-react-wrapper',$element).get(0);
            window.servicePortalPaUIWidget.render(element);
        });
        $scope.$on('$destroy',function onAngularDestroy() {
            var element = angular.element('pa-react-wrapper',$element).get(0);
            window.servicePortalPaUIWidget.destroy(element);
        });
    } else {
        // Will be removed when we switch all widgets to react
        compiledWidget = $compile('<div class="pa-widget-' + result.data.type + '" widget="' + result.data.sys_id + '"></div>')($scope);
        angular.element('.pa-widget-service-portal',$element).append(compiledWidget);
    }
});

function isReactWidget(type,newVisualizationEnabled) {
    var reactWidgetTypes = ['text','insight'];
    if (newVisualizationEnabled) {
        reactWidgetTypes.push('time');
        reactWidgetTypes.push('score');
    }
    return reactWidgetTypes.indexOf(type) != -1;
}}

小部件服务器脚本

(function() {
/* populate the 'data' object */
data.i18n = {
    initialMessage: gs.getMessage('Please select a widget'),paMsgs: SNC.PAUtils.getMessages()
};
data.language = gs.getSession().getLanguage();
data.dow = gs.getProperty('glide.ui.date_format.first_day_of_week',1);
 })();

我尝试使用 Highchart 配置代码，但没有变化。

var gaugeOptions = {
chart: {
    type: 'solidgauge'
},title: null,pane: {
    center: ['50%','85%'],size: '140%',startAngle: -90,endAngle: 90,background: {
        backgroundColor:
            Highcharts.defaultOptions.legend.backgroundColor || '#EEE',innerRadius: '60%',outerRadius: '100%',shape: 'arc'
    }
} }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）