2017-03-20 18 views
0

私は私のプロジェクトの1つにc3ライブラリを使用しています。C3グラフのスクロール可能な伝説?

enter image description here

すべてがOKに動作しますが、すべてのXの行は、それが伝説の新しい列を作成します。問題は、100以上の伝説を持つセットがあることです。

C3スクロール可能な凡例を作成する方法を教えてください。

D3の使用例が見つかりましたが、使用方法が見つかりません。

enter image description here

ありがとう!

答えて

0

まだ回答が見つからない場合は、こちらをご覧ください。 https://jsfiddle.net/3fk72ay5/106/

コード -

d3.select('.container').insert('div', '.chart').attr('class', 
'legend').selectAll('div') 
.data(['data1', 'data2', 'data3', 'data11', 'data21', 'data31', 
'data12', 'data22', 'data32', 'data13', 'data23', 'data33', 
'data41', 'data42']) 
.enter().append('div') 
.attr('data-id', function(id) { 
    return id; 
}) 
.html(function(id) { 
    return id; 
}) 
.each(function(id) { 
    //d3.select(this).append('span').style 
    d3.select(this).append('span').style('background-color', 
chart.color(id)); 
}) 
.on('mouseover', function(id) { 
    chart.focus(id); 
}) 
.on('mouseout', function(id) { 
    chart.revert(); 
}) 
.on('click', function(id) { 
$(this).toggleClass("c3-legend-item-hidden") 
    chart.toggle(id); 
}); 
関連する問題