我正在尝试构建一个实时图表,显示上一小时从0.0到1.0的值。从服务器端,我返回一个按分钟分组的值数组:
[1.0,1.0,0.0,0.0,1.0:0.0,0.0.0,0.00,0.0,0.00,1.0,0.01,3.0,0.0,3333333,1.0,0,0.0,0.25,0.5,1.0,0.0.0,1.0,0.0.,0.0,0.0.0,0.0,0.0.0,.0,0.00,.0,0.5,0.0,0.0,.0,0.01,.0,0.0.0.0,0.0,1.0,1.00,1.0,1.00,0.00,0.0.0,0.0
这就是从我的客户端来看的样子:
<div id="demo"></div>
<script src="http://square.github.com/cubism/d3.v2.js"></script>
<script src="http://square.github.com/cubism/cubism.v1.js"></script>
<script>
var context = cubism.context()
.serverDelay(0)
.step(60e2)
.size(1000)
.stop();
d3.select("#demo").selectAll(".axis")
.data(["top", "bottom"])
.enter().append("div")
.attr("class", function(d) { return d + " axis"; })
.each(function(d) { d3.select(this).call(context.axis().ticks(12).orient(d)); });
d3.select("#demo").append("div")
.attr("class", "rule")
.call(context.rule());
d3.select("#demo").selectAll(".horizon")
.data(["connected_calls"].map(metric))
.enter().insert("div", ".bottom")
.attr("class", "horizon")
.call(context.horizon()
.format(d3.format("+,.2p")));
context.on("focus", function(i) {
d3.selectAll(".value").style("right", i == null ? null : context.size() - i + "px");
});
// Replace this with context.graphite and graphite.metric!
function metric(name) {
var format = d3.time.format("%H:%M");
return context.metric(function(start, stop, step, callback) {
d3.json("/reports/quality_metrics/" + name, function(rows) {
var values = []
rows.forEach(function(d) {
values.push(value = d);
});
callback(null, values.slice(-context.size()));
});
}, name);
}
</script>
</div>
这就是我得到的:图像链接
我要问的是如何缩放上下文,使其符合我的轴?
谢谢!
var context=cubism.context().serverDelay(0).步骤(60e2).size([页面宽度(像素)]).stop();