3

我正在从 Graphite 加载指标，但是当它们在水平图表上呈现时，它们会在图表的左侧被挤压，而不是占据图表空间的整个宽度。这是一个屏幕截图，显示我的意思：

在此处输入图像描述

该数据来自我要求的 3 小时窗口。以下是最顶层水平图表的一些石墨输出：

,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 属性。这是立体主义 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 的其余部分几乎是从股票演示中复制粘贴的。为简洁起见，我不会包括在内，但如果有必要，我可以。

4

1 回答 1

4

见第 20 期：

目前，当 Cubism 请求 10 秒指标时，Graphite 将返回其最低分辨率的数据；但是，可用的最低分辨率实际上可能是更高的分辨率（例如 1 分钟数据）。立体主义，不知道更好，不准确地显示这些数据，而不是对数据进行上采样。

您可以通过在 Graphite 中存储更高分辨率的数据，或者说 summarise(metric, "10s") 来解决这个问题。

于 2012-09-14T19:27:42.963 回答