如何将tupsy popup添加到堆积区域图表 - protovis

时间:2012-10-11 13:33:24

标签: javascript protovis

我一直在尝试添加一个弹出窗口,显示堆叠区域图表的每一层中显示的数据类型。以下是我到目前为止所做的事情:

基本上当我将鼠标悬停在堆积区域图表的任意一层上时,我得到弹出窗口中显示的相同类型,我可以看到为什么会这样,但我不知道当鼠标结束时如何使其成为一个值图层,以及第二层上的另一个值。

请有人帮忙吗?

    /* 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);

0 个答案:

没有答案