【发布时间】:2020-09-07 16:29:50
【问题描述】:
我正在尝试在动态内容块中构建可视化以用于仪表板。 我使用 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>
但如前所述,我只使用硬编码数据:(
所以,我做了一些这样的测试:
<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>
只是想看看这个查询是否能完成它的工作,但我不太熟悉 SNow 脚本或 gliderecord 来理解或了解我如何在优先级组中获取这些事件或计算它们,我的意思是 如何准备数据,以便能够像硬编码数据一样在图表中使用它?
我知道,这是一个非常简单的场景,它只是让我了解基础知识并深入了解它,但我在这个早期阶段已经遇到了问题,我希望任何人都知道如何继续或可以给出我对这件事的逻辑有一些提示。
所以,我希望你们本周都有一个良好的开端,并且有人对我正在尝试做的事情有更好的了解,并且可以给我一些建议。
问候 丹尼斯
【问题讨论】:
标签: d3.js bar-chart servicenow