более чем один набор меток в Protovis? - PullRequest
Новая
       3

более чем один набор меток в Protovis?

1 голос
/ 09 июля 2011

Мне бы хотелось, чтобы на графике были значения и категории данных.Это гистограмма, и я хотел бы, чтобы значения данных и строка выводились в столбцах слева от столбца:

A 1 #
B 3 ###

Я попытался связать два вызова add (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();

1 Ответ

2 голосов
/ 09 июля 2011

Я действительно видел оба ярлыка, когда попробовал это.Но есть пара вещей, которые можно исправить здесь.Ключевым моментом является то, что когда вы объединяете такие методы в цепочку, когда вы add() устанавливаете новую метку, вы меняете контекст следующих вызовов методов, например: 

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

Есть несколько проблем сэто в вашем коде:

  • Ваши обработчики event() прикреплены к метке, а не к панели - к сожалению, метки не могут получать события в Protovis.

  • Ваша вторая метка прикреплена к первой метке.Хотя кажется, что на самом деле это работает, лучше избегать этого - вы действительно хотите, чтобы он был прикреплен к панели.

Самый простой способ справиться с этим - объединить методы в одномотметка.Вы можете сделать это, назначив родительскую метку переменной, а затем несколько раз используя эту переменную для разных дочерних меток.Кроме того, сначала вы прикрепляете первую метку непосредственно к панели, а не к якору - ее прикрепление к якору обычно дает более предсказуемые результаты.

Обновленный код: 

// 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/

...