【发布时间】:2016-09-06 16:15:26
【问题描述】:
我已经创建了这个 UI 宏(仍在开发中)并将它包含在一个 UI 页面中,它可以正常工作;但是,当我尝试通过 PA 仪表板将 UI 宏包含到动态内容块中时,它不会呈现任何内容???
宏的完整代码(试一试):
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<script language="javascript" src="/scripts/prototype-adapter.jsx" />
<script language="javascript" src="/scripts/GlideV2ChartingIncludes.jsx" />
<g:evaluate>
var time = [];
var newIncidents = [];
var resIncidents = [];
var incidentsJson = '[';
var gr = GlideRecord('sys_trend');
gr.addQuery('name', 'New Incidents');
gr.query();
while(gr.next()){
newIncidents.push(gr.value.toString());
incidentsJson += '{"y": '+parseInt(gr.value.toString(), 10)+', "name": "'+gr.collected+'"}',;
}
newIncidents = newIncidents.join(',');
incidentsJson = incidentsJson.slice(0,-1);
incidentsJson += ']';
</g:evaluate>
<script>
var incidentsJson = '${incidentsJson}';
var incidents = "${newIncidents}";
var I = incidents.split(',');
for(var i=0; i != I.length; i++) {
I[i] = parseInt(I[i], 10);
}
document.observe("dom:loaded", function() {
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'newchart',
type: 'line'
},
title: {
text: 'Backlog Growth',
x: -20 //center
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Growth'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '#'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Incidents',
data: [{"y": 29, "name": "2016-09-04 21:57:21"},{"y": 28, "name": "2016-09-05 21:57:22"}]
}, {
name: 'Requested Items',
data: [{"y": 50, "name": "2016-09-04 21:57:21"},{"y": 25, "name": "2016-09-05 21:57:22"}]
}, {
name: 'Demands',
data: [{"y": 10, "name": "2016-09-04 21:57:21"},{"y": 5, "name": "2016-09-05 21:57:22"}]
}]
});
});
</script>
<div class="container-fluid">
<div id="highwrapper" style="width: 500px; height: 400px; position:relative;">
<div id="newchart" style="min-width: 500px; height: 400px; margin: 20; position:absolute;top:0px;left:0px;"></div>
</div>
</div>
</j:jelly>
要包含在 UI 页面或内容块中的代码:
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<g:macro_invoke macro="custom_backlog_line_chart"/>
</j:jelly>
当我在 UI 页面中“尝试”时工作得很好,但是当我在仪表板的动态内容块小部件中使用它时得到空白小部件。
另外,如果有人能弄清楚为什么我不能将 ${incidentsJson} 传递给我的系列:数据:在我的图表中这也将非常有帮助!现在我正在硬编码 json 输出是什么来显示图表。如果我尝试将其传递给数据:我得到一个空白图表...
我只是尝试过
series: [{
name: 'Incidents',
data: incidentsJson
},
我在 Highcharts.com 网站上的 jsFiddle 中进行了测试,我可以将 json 数组分配给 var 并将其传递给系列而没有问题,但在 SN 中执行时遇到问题。
提前致谢!
########更新好的,所以我发现两个问题 1 在这里是一个错位的逗号。
incidentsJson += '{"y": '+parseInt(gr.value.toString(), 10)+', "name": "'+gr.collected+'"}',;
我不小心把它放在了 ' ' 外面,所以它应该是这样的。
incidentsJson += '{"y": '+parseInt(gr.value.toString(), 10)+', "name": "'+gr.collected+'"},';
第二个问题是将评估变量传递给脚本部分不应包含在“”中。
错误var incidentsJson = '${incidentsJson}';
对var incidentsJson = ${incidentsJson};
接下来我可以将incidentsJson 传递给数据系列。
series: [{
name: 'Incidents',
data: incidentsJson
},
这是输出
【问题讨论】:
-
我可以渲染图表,但仍然无法将变量传递给图表数据系列
-
你确定你的数据格式正确吗?
-
您好,文档说明它可以处理对象、字符串或整数。然而事实证明,我的逗号和引号放错了位置。
标签: javascript json highcharts servicenow