我正在关注比例交互示例@ http://mbostock.github.com/protovis/docs/invert.html我正在尝试绘制 2 线系列图表。
我的 JSON 文件如下:
var psSeriesData =
[{"Dates":["1-10","2-10","3-10","4-10","5-10","6-10","7-10","8-10"],"ScoresForA":
[78.78,79.79,78.78,78.78,78.78,79.79,79.79,76.92],"ScoresForB":
[78.78,79.79,78.78,78.78,78.78,79.79,79.79,76.92]}]
我打算分别使用 Dates 和使用 ScoresForA 和 ScoresForB 的 2 折线图绘制 x 轴,但是在经过大量调整后我很困惑如何做到这一点。
我的代码如下:
var data = pv.range(2).map(function(i) {
return pv.range(0, 10, .1).map(function(x) {
return {x: psSeriesData.Dates, y: psSeriesData.ScoresForA,ScoresForB };
});
});
/* Chart dimensions and scales. */
var w = 400,
h = 200,
x = pv.Scale.linear(0, 9.9).range(0, w),
y = pv.Scale.linear(0, 10).range(0, h),
i = -1;
/* The root panel. */
var vis = new pv.Panel()
.width(w)
.height(h)
.bottom(20)
.left(20)
.right(10)
.top(5);
/* Y-ticks. */
vis.add(pv.Rule)
.data(pv.range(100))
.visible(function() !(this.index % 2))
.bottom(function(d) Math.round(y(d)) - .5)
.strokeStyle(function(d) d ? "#eee" : "#000")
.anchor("left").add(pv.Label)
.text(function(d) (d * 10).toFixed(0) );
/* X-ticks. */
vis.add(pv.Rule)
.data(x.ticks())
.visible(function(d) d > 0)
.left(function(d) Math.round(x(d)) - .5)
.strokeStyle(function(d) d ? "#eee" : "#000")
.anchor("bottom").add(pv.Label)
.text(function(d) d.toFixed());
/* A panel for each data series. */
var panel = vis.add(pv.Panel)
.data(data);
/* The line. */
var line = panel.add(pv.Line)
.data(function(d) d)
.left(function(d) x(d.x))
.bottom(function(d) y(d.y))
.lineWidth(3);
/* The mouseover dots and label. */
line.add(pv.Dot)
.visible(function() i >= 0)
.data(function(d) [d[i]])
.fillStyle(function() line.strokeStyle())
.strokeStyle("#000")
.size(20)
.lineWidth(1)
.add(pv.Dot)
.left(10)
.bottom(function() this.parent.index * 12 + 10)
.anchor("right").add(pv.Label)
.text(function(d) (d.y * 10).toFixed(5));
/* An invisible bar to capture events (without flickering). */
vis.add(pv.Bar)
.fillStyle("rgba(0,0,0,.001)")
.event("mouseout", function() {
i = -1;
return vis;
})
.event("mousemove", function() {
var mx = x.invert(vis.mouse().x);
i = pv.search(data[0].map(function(d) d.x), mx);
i = i < 0 ? (-i - 2) : i;
return vis;
});
vis.render();
我究竟做错了什么?
在 nrabinowitz 给出输入后:
var psSeriesData = {
"Dates": ["1/10","2/10","3/10","4/10","5/10","6/10","7/10","8/10"],
"ScoresForA": [78.78,79.79,78.78,78.78,78.78,79.79,79.79,76.92],
"ScoresForB": [78.78,79.79,78.78,78.78,78.78,79.79,79.79,76.92]
};
// start by iterating over the two keys for your time series data
var data = ["ScoresForA","ScoresForB"].map(function(seriesKey) {
// use pv.range to walk through the indexes of the
// date array (basically the same as a for loop)
return pv.range(0, psSeriesData.Dates.length)
// map these indexes to an array of objects
.map(function(dateIndex) {
// now return an object with the date index
// and series value for that index
return {
x: dateIndex,
y: psSeriesData[seriesKey][dateIndex]
}
});
});
/* Chart dimensions and scales. */
var w = 400,
h = 200,
x = pv.Scale.linear(0, 9.9).range(0, w),
y = pv.Scale.linear(0, 10).range(0, h),
i = -1;
/* The root panel. */
var vis = new pv.Panel()
.width(w)
.height(h)
.bottom(20)
.left(20)
.right(10)
.top(5);
/* Y-ticks. */
vis.add(pv.Rule)
.data(pv.range(100))
.visible(function() !(this.index % 2))
.bottom(function(d) Math.round(y(d)) - .5)
.strokeStyle(function(d) d ? "#eee" : "#000")
.anchor("left").add(pv.Label)
.text(function(d) (d * 10).toFixed(0) );
/* X-ticks. */
vis.add(pv.Rule)
//.data(function(d) [d[i].Dates])
.data(pv.range(0, psSeriesData.Dates.length).map(function(a) (psSeriesData[a].Dates)))
.visible(function(d) d > 0)
.left(function(d) Math.round(x(d)) - .5)
.strokeStyle(function(d) d ? "#eee" : "#000")
.anchor("bottom").add(pv.Label)
.text(function(d) (d).toFixed());
/* A panel for each data series. */
var panel = vis.add(pv.Panel)
.data(data);
/* The line. */
var line = panel.add(pv.Line)
.data(function(d) d)
.left(function(d) x(d.x))
.bottom(function(d) y(d.y))
.lineWidth(3);
/* The mouseover dots and label. */
line.add(pv.Dot)
.visible(function() i >= 0)
.data(function(d) [d[i]])
.fillStyle(function() line.strokeStyle())
.strokeStyle("#000")
.size(20)
.lineWidth(1)
.add(pv.Dot)
.left(10)
.bottom(function() this.parent.index * 12 + 10)
.anchor("right").add(pv.Label)
.text(function(d) (d.y ).toFixed(5));
/* An invisible bar to capture events (without flickering). */
vis.add(pv.Bar)
.fillStyle("rgba(0,0,0,.001)")
.event("mouseout", function() {
i = -1;
return vis;
})
.event("mousemove", function() {
var mx = x.invert(vis.mouse().x);
i = pv.search(data[0].map(function(d) d.x), mx);
i = i < 0 ? (-i - 2) : i;
return vis;
});
vis.render();
即使我使用了 map 函数和数组引用,日期仍然没有显示为 x 轴。读取“日期”属性似乎有问题。任何建议
错误:TypeError:无法读取未定义的属性“日期”