如何在堆积条形图

Question

嗨的顶部显示总数所有我厌倦了像附着图像D3 C3图表的顶部显示总

Answer 1

你将需要：

• data.labels.format
• legend.item.onclick
• data.order
• chart.data.shown
• chart.toggle

仅显示顶部标签很简单：只要查看当前可见的标签，找到最后：

function showLastLabel() 
{ 
    var shown = chart.data.shown().map(function(item){ return item.id }) // get visible ids: ['data1', 'data2', ...] 
    var last = (shown[shown.length - 1]) 
    d3.select('.c3-chart-texts').selectAll('.c3-target').style('display', 'none') // hide all 
    d3.select('.c3-chart-texts').selectAll('.c3-target-' + last).style('display', 'block') // show last 
} 

重要的是要禁用堆栈重新排序（C3默认情况下做到这一点）因为它违反了上述逻辑。

order: null, 

然后，在计算总顶部标签需要额外的检查能见度：

labels: { 
    format: function(v, id, i, j) 
    { 
     if (isNaN(totals[i])) totals[i] = 0 

     // sum only visible 
     if (chart) 
     { 
      var shown = chart.data.shown().map(function(item){ return item.id }) 
      if (shown.indexOf(id) != -1) totals[i] += v 
     } 
     else 
     { 
      totals[i] += v 
     } 

     return totals[i] 
    } 
}, 

最后的传说物品点击我们更新标签的可见性：

legend: { 
    item: { 
    onclick: function (id) { 
     chart.toggle([id]) // keep default functionality 
     showLastLabel() 
    } 
    } 
}, 

查看完整的例子here