Question

我正在使用c3js在我的项目中渲染图表，我想知道是否有一种方法可以在图例上显示标签上的值。像，

 Office 40%
 Home   20%
 Drive  30%
 Other  10%

JSFiddle：http://www.jsfiddle.net/wscfujgg

Answer 1

您可以在c3js中提供这样的自定义图例

d3.select('#chart').insert('div', '.chart').attr('class', 'legend').selectAll('span')
    .data(['Office', 'School', 'Water', 'Work'])
  .enter().append('div')
    .attr('data-id', function (id) { return id; })
    .html(function (id) {  return  getDataValue(id); })
    .each(function (id) {
        d3.select(this).style('background-color', chart.color(id));
    })
    .on('mouseover', function (id) {
        chart.focus(id);
    })
    .on('mouseout', function (id) {
        chart.revert();
    })
    .on('click', function (id) {
        chart.toggle(id);
    });

完整的工作代码here：

有没有办法在C3js饼图中的图例上显示值和标签？

1 个答案: