Question

我正在为我的一个项目使用c3库。

一切正常，但每X行创建一个新的图例列。问题是我有一些超过100个传说的集合。

如何制作C3可滚动图例。

我找到了一个D3的例子，但找不到使用它的方法。

谢谢！

Answer 1

如果你还在寻找答案，那么这里就是一个小问题。 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);
 });

Answer 2

我从网站上得到一个，希望对您有所帮助。 https://jsfiddle.net/yasu47b/3fk72ay5/

html：

<div class="box">
  <div id="chart"></div>
  <div class="container"></div>

</div>
<div class="container2"></div>

css：

#chart,
.container {
  float: left;
}

.legend span {
  display: inline-block;
  margin-left: 7px;
  margin-right: 7px;
  padding: 5px;
}
.container .legned div {
  width: 100%;
}
.container .legend {
  width: 150px;
  height: 230px;
  overflow: scroll;
}

脚本：

var chart = c3.generate({


size: {
    width: 200,
    height: 240,
  },
  data: {
    columns: [
      ['data1', 100],
      ['data2', 300],
      ['data3', 200],
      ['data11', 100],
      ['data21', 300],
      ['data31', 200],
      ['data12', 100],
      ['data22', 300],
      ['data32', 200],
      ['data13', 100],
      ['data23', 300],
      ['data33', 200],
      ['data41', 100],
      ['data42', 300],
      ['あいうえおかきくけこさしすそたちつてと', 200],
    ],
    type: 'pie'
  },
  legend: {
    show: false
  }
});

function toggle(id) {
  chart.toggle(id);
}

// example1
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);
  });

  // example2
d3.select('.container2').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 '<span></span>'+id;
  })
  .each(function(id) {
    //d3.select(this).append('span').style
    d3.select(this).select('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);
  });

C3图表上的可滚动图例？

2 个答案: