1

値とデータカテゴリの両方をグラフに表示したいと思います。これは棒グラフであり、データ値と文字列を棒の左側の列に印刷したいと思います。

A 1＃
B 3 ###

2つのadd（pv.Label）呼び出しをグラフにチェーンしようとしましたが、何も実行されないようです-2番目のラベルセットは追加されていません。これは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();
4

1 に答える 1

2

これを試してみたところ、実際に両方のラベルが表示されました。ただし、ここで修正できることがいくつかあります。重要な点は、このようなメソッドをチェーンする場合add()、新しいマークを付けるときに、次のメソッド呼び出しのコンテキストを変更することです。例：

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

コード内のこれにはいくつかの問題があります。

  • ハンドラーevent()はバーではなくラベルにアタッチされています。残念ながら、ラベルはProtovisでイベントを受信できません。

  • 2番目のラベルは最初のラベルに添付されます。これは実際にはある程度機能しているように見えますが、回避することをお勧めします。実際には、バーに接続する必要があります。

これに対処する簡単な方法は、単一のマークでメソッドをチェーンすることだけです。これを行うには、親マークを変数に割り当ててから、その変数をさまざまな子マークに数回使用します。また、最初にラベルをアンカーではなくバーに直接アタッチする必要があります。通常、アンカーにラベルをアタッチすると、より予測可能な結果が得られます。

更新されたコード：

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

于 2011-07-09T14:56:31.753 に答える