我正在从 Graphite 加载指标,但是当它们在水平图表上呈现时,它们被压在图表的左侧,而不是占据图表空间的整个宽度。这是显示我的意思的屏幕截图:
该数据来 self 请求的 3 小时窗口。以下是最顶部地平线图表的一些 Graphite 输出:
,1347632400,1347643200,60|892.0,526.0,371.0,1475.0,1234.0 [...] 1250.0,1604.0,1146.0,965.0
很难从图像中分辨出来,但这些值确实与绘制的内容一致。只是它们没有占用所有空间。
图表被绘制成一个简单的 <div id="#graphs">
只有position: relative
和 width: 1080px;
用于 CSS 属性。这是 Cubism JavaScript:
var context = cubism.context()
.step(1e4)
.size(1080); // 3 hours
var graphite = context.graphite("http://graphite.example.com");
var horizon = context.horizon().metric(graphite.metric).height(100);
var metrics = [
"prod.counts.total_stats",
"stage.counts.total_stats",
"dev.counts.total_stats"
]
d3.select("#graphs").append("div")
.attr("class", "axis")
.call(context.axis().ticks(12).orient("top"));
d3.select("#graphs").append("div")
.attr("class", "rule")
.call(context.rule());
d3.select("#graphs").selectAll(".horizon")
.data(metrics)
.enter().append("div")
.attr("class", "horizon")
.call(horizon);
其余的 CSS 几乎都是从 stocks demo 中复制粘贴的。 .为简洁起见,我不会包括在内,但如果有必要,我可以。
最佳答案
参见 issue 20 :
Currently Graphite will return its lowest-resolution data when Cubism requests 10-second metrics; however, the lowest-available resolution may in fact be higher resolution (such as 1-minute data). Cubism, not knowing any better, displays this data inaccurately rather than upsampling the data.
您可以通过在 Graphite 中存储更高分辨率的数据或使用 summarize(metric, "10s") 来解决这个问题。
关于javascript - 为什么这些立体主义地平线图向左挤压?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12429311/