2016-10-19 6 views
0

ツールチップは常に垂直線の右側にありますが、カーソルが最後の値にあるため、ツールチップの位置をc3jsに設定する方法はいくつかありますそれを離れることなくグラフ内の左側または状態に向かって位置を変える。グラフの最後の値にツールチップの位置を設定する

あなたはthis link

var chart = c3.generate({ 
    data: { 
     columns: [ 
      ['data1', 300, 350, 300, 0, 0, 0], 
      ['data2', 130, 100, 140, 200, 150, 50] 
     ], 
     types: { 
      data1: 'area', 
      data2: 'area-spline' 
     } 
    }, 
    axis: { 
     y: { 
      padding: {bottom: 0}, 
      min: 0 
     }, 
     x: { 
      padding: {left: 0}, 
      min: 0, 
      show: false 
     } 
    } 

}); 

上の例を見ることができるツールヒントは、最後の値

のために右側にその位置を維持することを、私はこれがc3js上の通常のツールチップの動作であることを知っているが、私はしたいです何か案は?

答えて

3

あなたはこのコードを使用してツールチップの位置を設定することができます:それはツールチップが私にはわからないチャートの側面を突きとき、それだけかもしれ作品がどのように

http://c3js.org/reference.html#tooltip-position

tooltip: { 
    position: function (data, width, height, element) { 
     var top = d3.mouse(element)[1] + 15; 
     return {top: top, left: parseInt(element.getAttribute('x')) + parseInt(element.getAttribute('width'))} 
    } 
} 

を断つ。必要に応じて右側に100ピクセルの余白を追加できますが、それはあなたのグラフを小さくします。

関連する問題