Question

我想在图表上同时拥有值和数据类别。这是一个条形图，我想要在条形图左侧的列中打印数据值和字符串：

A 1＃
B 3 ###

我尝试将两个添加（pv.Label）调用链接到我的图表上，但似乎什么也没做 - 第二个标签集未添加。这是甚至可以用protovis完成的吗？任何建议？

vis = new pv.Panel()
.def("j", -1)
.width(800)
.height(50)
.right(3);

vis.add(pv.Bar)
.data(wData)
.bottom(0)
.width(20)
.height(function(d) d[1] * 1.2)
.left(function() this.index * 27)
.fillStyle(function() vis.j() == this.index ? "orange" : "steelblue")
.add(pv.Label)  **// does nothing!!**
.bottom(0)
.textAlign("center")
.textStyle("white")
.text(function(d) d[0] )
.event("mouseover", function() vis.j(this.index))
.event("mouseout", function() vis.j(-1))
.anchor("top").add(pv.Label)
.visible(function() vis.j() >= 0)
.textStyle("white")
.text(function(d) d[1]);
vis.render();

Answer 1

当我尝试这个时，我确实看到了两个标签。但是有一些事情可以在这里解决。关键是当你链接这样的方法时，当你add()一个新标记时，你改变了下面方法调用的上下文，例如：

vis.add(pv.Bar)
    // this applies to the Bar
    .width(10)
  .add(pv.Label)
    // this applies to the label
    .top(5);

您的代码中存在以下几个问题：

您的event()处理程序已附加到标签上，而不是附加到条形图上 - 遗憾的是，标签无法在Protovis中接收事件。
您的第二个标签已附加到第一个标签。虽然这实际上似乎有点起作用，但最好还是避免它 - 你真的希望它附加在Bar上。

解决这个问题的简单方法是只在单个标记上链接方法。您可以通过将父标记分配给变量，然后对不同的子标记多次使用该变量来完成此操作。您还可以将第一个Label直接附加到Bar，而不是锚 - 将其附加到锚点通常会为您提供更可预测的结果。

更新的代码：

// make a new variable to refer to the bars
var bars = vis.add(pv.Bar)
    .data(wData)
    .bottom(0)
    .width(20)
    .height(function(d) d[1] * 1.2)
    .left(function() this.index * 27)
    .fillStyle(function() vis.j() == this.index ? "orange" : "steelblue")
    // you need to move the events up to apply 
    // to the bar - labels can't receive events, 
    // and the index will always be 0
    .event("mouseover", function() vis.j(this.index))
    .event("mouseout", function() vis.j(-1));

// now add each label to the bars
bars.anchor('bottom').add(pv.Label)
    .bottom(0)
    .textAlign("center")
    .textStyle("white")
    .text(function(d) d[0] );

// and again
bars.anchor("top").add(pv.Label)
    .visible(function() vis.j() >= 0)
    .textStyle("white")
    .text(function(d) d[1]);

这里有一个工作版本：http://jsfiddle.net/nrabinowitz/ABmuq/

protovis中有多套标签？

1 个答案: