Javascript Protovis尺度交互折线图示例
我正在遵循比例交互示例@，在这里我试图绘制两条直线系列图 我的JSON文件如下所示：Javascript Protovis尺度交互折线图示例,javascript,visualization,protovis,Javascript,Visualization,Protovis,我正在遵循比例交互示例@，在这里我试图绘制两条直线系列图 我的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,7
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]}]
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();
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]}]
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();
var data=pv.range（2.map）（函数（i）{
返回pv.range（0,10,1）.map（函数（x）{
返回{x:psSeriesData.Dates，y:psSeriesData.ScoresForA，ScoresForB}；
});
});
/*图表尺寸和比例*/
var w=400，
h=200，
x=pv.刻度线性（0，9.9）.范围（0，w），
y=pv.刻度线性（0,10）.范围（0,h），
i=-1；
/*根面板*/
var vis=新光伏板（）
.宽度（w）
.高度（h）
.底部（20）
.左（20）
.右（10）
.top（5）；
/*Y形蜱*/
可视添加（pv.规则）
.数据（pv.范围（100））
.visible（函数（）！（此.index%2））
.bottom（函数（d）数学圆（y（d））-.5）
.strokeStyle（功能（d）d？#eee:“000”）
.锚（“左”）.添加（pv.标签）
.text（函数（d）（d*10）.toFixed（0））；
/*X-ticks*/
可视添加（pv.规则）
.data（x.ticks（））
.可见（功能（d）d>0）
.左（函数（d）数学圆（x（d））-.5）
.strokeStyle（功能（d）d？#eee:“000”）
.锚（“底部”）.添加（pv.标签）
.text（函数（d）d.toFixed（））；
/*每个数据系列的面板*/
var配电盘=可视添加（pv.配电盘）
.数据（数据）；
/*排队*/
var线=面板添加（pv线）
.数据（功能（d）d）
.左（功能（d）x（d.x））
.底部（功能（d）y（d.y））
.线宽（3）；
/*鼠标覆盖点和标签*/
添加行（pv.Dot）
.visible（函数（）i>=0）
.数据（功能（d）[d[i]]
.fillStyle（函数（）行.strokeStyle（））
.strokeStyle（“#000”）
.尺寸（20）
.线宽（1）
.add（pv.Dot）
.左（10）
.bottom（函数（）this.parent.index*12+10）
.锚（“右”）.添加（pv.标签）
.text（函数（d）（d.y*10）.toFixed（5））；
/*捕捉事件的不可见条（不闪烁）*/
可视添加（pv.Bar）
.fillStyle（“rgba（0,0,0,001）”）
.event（“mouseout”，function（）{
i=-1；
返回vis；
})
.event（“mousemove”，function（）{
var mx=x.invert（vis.mouse（）.x）；
i=pv.search（数据[0].map（函数（d）d.x），mx）；
i=i<0？（-i-2）：i；
返回vis；
});
vis.render（）；
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();
var psSeriesData={
“日期”：[“1/10”、“2/10”、“3/10”、“4/10”、“5/10”、“6/10”、“7/10”、“8/10”]，
“评分法”：[78.78,79.79,78.78,78.78,78.78,79.79,79.79,76.92]，
“得分论坛”：[78.78,79.79,78.78,78.78,78.78,79.79,79.79,76.92]
};
//首先，迭代时间序列数据的两个键
变量数据=[“ScoresForA”，“ScoresForB”].map（函数（seriesKey）{
//使用pv.range遍历
//日期数组（基本上与for循环相同）
返回pv.range（0，psSeriesData.Dates.length）
//将这些索引映射到对象数组
.map（函数（日期索引）{
//现在返回一个带有日期索引的对象
//以及该索引的系列值
返回{
x:日期索引，
y:psSeriesData[序列键][日期索引]
}
});
});
/*图表尺寸和比例*/
var w=400，
h=200，
x=pv.刻度线性（0，9.9）.范围（0，w），
y=pv.刻度线性（0,10）.范围（0,h），
i=-1；
/*根面板*/
var vis=新光伏板（）
.宽度（w）
.高度（h）
.底部（20）
.左（20）
.右（10）
.top（5）；
/*Y形蜱*/
可视添加（pv.规则）
.数据（pv.范围（100））
.visible（函数（）！（此.index%2））
.bottom（函数（d）数学圆（y（d））-.5）
.strokeStyle（功能（d）d？#eee:“000”）
.锚（“左”）.添加（pv.标签）
.text（函数（d）（d*10）.toFixed（0））；
/*X-ticks*/
可视添加（pv.规则）
//.data（函数（d）[d[i].日期]）
.data（pv.range（0，psSeriesData.Dates.length）.map（函数（a）（psSeriesData[a].Dates）））
.可见（功能（d）d>0）
.左（函数（d）数学圆（x（d））-.5）
.strokeStyle（功能（d）d？#eee:“000”）
.锚（“底部”）.添加（pv.标签）
.text（函数（d）（d）.toFixed（））；
/*每个数据系列的面板*/
var配电盘=可视添加（pv.配电盘）
.数据（数据）；
/*排队*/
// note - no enclosing array
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]
}
});
});