如何在堆积条形图的顶部显示总计数

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]
    }
},

最后我们更新标签＆＃39;点击图例项目时的可见性：

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

查看完整示例here