我一直在尝试添加一个弹出窗口,显示堆叠区域图表的每一层中显示的数据类型。以下是我到目前为止所做的事情:
基本上当我将鼠标悬停在堆积区域图表的任意一层上时,我得到弹出窗口中显示的相同类型,我可以看到为什么会这样,但我不知道当鼠标结束时如何使其成为一个值图层,以及第二层上的另一个值。
请有人帮忙吗?
/* y-axis scale is the largest data item scaled to height of the panel */
yScale = pv.Scale.linear(0, pv.max(data, function (d) {
var totalValue = 0;
for (i = 0; i < stackLayers.length; i++) {
totalValue = totalValue + d[stackLayers[i]];
}
return totalValue;
})).range(0, h),
colors = pv.Colors.category20().range();
/* render the area's using the predefined protovis stack layout */
vis.add(pv.Layout.Stack)
.layers(stackLayers)
.values(data)
.x(function (d) {
return xScale(d.x);
})
.y(function (d, p) {
return yScale(d[p]);
})
.layer.add(pv.Area)
.interpolate("cardinal")
.tension(0.97)
.fillStyle(function (d) {
return colors[this.parent.index];
})
.text(function (d) {
if(stackLayers[i]== "HAL")
{return "Dave";}
else
{return "Sorry";}
/* return (stackLayers[i]== "Hal" ? "Dave" : "Sorry");*/
})
.event("mouseover", pv.Behavior.tipsy({gravity:"s", fade:true}))
.anchor("top").add(pv.Line)
.strokeStyle(function (d) {
return colors[this.parent.index].darker();
})
.interpolate("cardinal")
.tension(0.97)
.lineWidth(2);
/* Y-axis rule. */
vis.add(pv.Rule)
.data(yScale.ticks(5))
.left(0)
.width(w)
.bottom(yScale)
.strokeStyle(function (d) {
return d ? "rgba(128,128,128,.2)" : "#000";
})
.anchor("left").add(pv.Label)
.text(yScale.tickFormat);