D3.js ServiceNow/GlideRecord-查询表后如何为图表准备数据？_D3.js_Bar Chart_Servicenow

D3.js ServiceNow/GlideRecord-查询表后如何为图表准备数据？

d3.js

D3.js ServiceNow/GlideRecord-查询表后如何为图表准备数据？,d3.js,bar-chart,servicenow,D3.js,Bar Chart,Servicenow,我正在尝试在动态内容块中构建一个可视化，以便在仪表板中使用。我使用d3.js作为图表库。它看起来已经和预期的一样了，但我只使用硬编码数据，并且我想查询表中的实时数据这就是我目前所做的： <?xml version="1.0" encoding="utf-8" ?> <j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide&q

我正在尝试在动态内容块中构建一个可视化，以便在仪表板中使用。我使用d3.js作为图表库。它看起来已经和预期的一样了，但我只使用硬编码数据，并且我想查询表中的实时数据

这就是我目前所做的：

<?xml version="1.0" encoding="utf-8" ?>  
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">  
<html>
    <script src="https://d3js.org/d3.v6.min.js"></script>
    <style>
        .chart rect {
            fill: steelblue;
        }

        .chart text {
            fill: white;
            font: 10px sans-serif;
            text-anchor: start;
        }

        .centered-chart {
            text-align: center;
        }
    </style>
    <body>
        <div class="centered-chart">
            <h1>D3 Chart Test - Incidents (Priority) </h1>
            <svg class="chart"></svg>
        </div>
    </body>
    <script>

        var c = this;


        var data = [
        
        {"category": "1 - Critical", "value": 26}, 
        {"category": "2 - High", "value": 4}, 
        {"category": "3 - Moderate", "value": 8}, 
        {"category": "4 - Low", "value": 3},
        {"category": "5 - Planning", "value": 14}
        
        ];


        var width = 600,

        barHeight = 20;



        var chart = d3.select(".chart")

        .attr("width", width)

        .attr("height", barHeight * data.length);




        var x = d3.scaleLinear()

        .range([0, width])

        .domain([0, d3.max(data, function(d) { return d.value; })]);




        var bar = chart.selectAll("g")

        .data(data)

        .enter().append("g")

        .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });




        bar.append("rect")

        .attr("width", function(d) { return x(d.value); })

        .attr("height", barHeight - 1);




        bar.append("text")

        .attr("x", 5)

        .attr("y", barHeight / 2)

        .attr("dy", ".35em")

        .text(function(d) { return d.category; });



        bar.append("text")

        .attr("x", function(d) { return x(d.value) - 15; })

        .attr("y", barHeight / 2)

        .attr("dy", ".35em")

        .text(function(d) { return d.value; });
    </script>
</html>
</j:jelly>


.chart rect{
填充：钢蓝；
}
.图表文本{
填充物：白色；
字体：10px无衬线；
文本锚定：开始；
}
.中心图{
文本对齐：居中；
}
D3图表测试-事件（优先级）
var c=这个；
风险值数据=[
{“类别”：“1-临界”，“值”：26}，
{“类别”：“2-高”，“值”：4}，
{“类别”：“3-中等”，“值”：8}，
{“类别”：“4-低”，“值”：3}，
{“类别”：“5-规划”，“价值”：14}
];
可变宽度=600，
杆高=20；
var图表=d3。选择（“图表”）
.attr（“宽度”，宽度）
.attr（“高度”，条形高度*数据长度）；
var x=d3.scaleLinear（）
.范围（[0，宽度]）
.domain（[0，d3.max（数据，函数（d）{返回d.value；}）]）；
变量条=图表。选择全部（“g”）
.数据（数据）
.enter（）.append（“g”）
.attr（“transform”，函数（d，i）{return“translate（0，+i*barHeight+”）；}）；
附加条（“rect”）
.attr（“宽度”，函数（d）{返回x（d.value）；}）
.attr（“高度”，酒吧高度-1）；
附加条（“文本”）
.attr（“x”，5）
.attr（“y”，酒吧高度/2）
.attr（“dy”，“.35em”）
.text（函数（d）{返回d.category；}）；
附加条（“文本”）
.attr（“x”，函数（d）{返回x（d.value）-15；}）
.attr（“y”，酒吧高度/2）
.attr（“dy”，“.35em”）
.text（函数（d）{返回d.value；}）；

但如前所述，我只使用硬编码数据：(

所以，我做了如下测试：

<script>
    var gr = new GlideRecord('incident');
        gr.addQuery('priority', '=', 1);
        gr.query(response);

    function response(result) {
        while(result.next()) {
            console.log(result.getValue('number')); 
        }
    }
</script>


var gr=新记录（“事件”）；
gr.addQuery（'priority'，'='，1）；
gr.query（响应）；
功能响应（结果）{
while（result.next（））{
console.log（result.getValue（'number'）；
}
}

我只是想看看这个查询功能是否发挥作用，但我对SNow脚本或gliderecord不太熟悉，因此无法理解或了解，我是说，我是如何在优先级组中获得这些事件的，或者对它们进行计数的我如何准备数据，以便能够像硬编码数据一样在图表中使用它

我知道，这是一个非常简单的场景，我只需要了解基本知识并深入了解它，但我在早期阶段已经遇到了问题，我希望任何人都知道如何继续，或者可以给我一些关于这件事的逻辑提示

所以，我希望你们在这周都有一个良好的开端，有人对我正在努力做的事情有更好的理解，可以给我一些建议

格里茨

丹尼斯

我不熟悉

ServiceNow

或

GlideRecord

，所以我希望能帮上忙

您的问题与d3没有特别的关系，因为您知道如何将数据从一种格式转换为可视化，但更多的是如何将数据从记录转换为所述格式

var类别={
1:“1-关键”，
2:“2-高”，
3:“3-中等”，
4:“4-低”
5:“5-规划”
};
var数据=[]；
var gr=新记录（“事件”）；
//Object.entries返回（键、值）的集合
Object.entries（categories）.forEach（函数（entry）{
var优先级=条目[0]；
var类别=分录[1]；
gr.addQuery（'priority'，'='，priority）；
//getRowCount返回匹配行数
push（{category:category，value:gr.getRowCount（）}）；
});

编辑您询问如何获取所有类别。我不知道。在普通数据库中，您将有一个单独的表

优先级

或

类别

表。如果是这样，您可以执行以下操作：

var类别=[]；
var gr=新记录（“优先级”）；
gr.query（）；
while（gr.next（））{
categority[gr.priority]=gr.category；//或名称/标识符或其他任何内容
}

这将创建一个对象，从数据库中获取所有优先级，并将它们放在那里。我不建议获取所有事件以获取优先级，因为这可能会花费更高的成本。

我认为你是对的。我知道在这种情况下，我的图表会显示一个类似上面硬编码的数组，我认为“现在”我知道如何从数据库中获取数据。我的问题是，我真的不知道如何准确地处理这些数据以形成一个像上面那样的数组。在你的例子中，我计算了一些关键的数据，等等，但我把优先级放进了这个变量中，但老实说，从数据库中读取它们，然后将它们放在一个像e提到了上面的一个：）我在我的答案中添加了一些东西，但请记住，我以前从未使用过它，我只是将我的数据库经验投射到GlideRecord上