javascript - 在 C3js 上，当您将鼠标悬停在条形图上时，如何使条形图上的工具提示显示该条形的数据？

Question

我有以下使用 C3.js 和一些 JSON 数据的图表。如何使工具提示显示每个单独条形图的数据，而不是表格上的所有条形图数据？

var chart = [
 {'0-9': 249.8740575482693,
   '10-19': 238.2744788358169,
   '20-29': 369.10362988529357,
   '30-39': 156.9635033529556,
   '40-49': 266.00448275832673,
   '50-59': 283.5138392550998,
   '60-69': 211.16877917295733,
   '70-79': 154.08326897057742,
   '80+': 148.8063871481496},
]

chart = c3.generate({
 bindto: '#chart',
 data: {
    json: chart,
    keys: {
        value: ['0-9', '10-19', '20-29', '30-39', '40-49', '50-59', '60-69', '70-79', '80+']
    },
    type: 'bar'
},
color: {
    pattern: ['#E39920', '#53B5B5', '#CD249A', '#F56223', '#6FAAD6','#A33E54', '#27668D','#75AB36', '#6E37B6']
  },
  tooltip: {
    format: {
        title: function (d) { return 'Data'},
        value: function (value, ratio, id) {
            var format = id === 'data1' ? d3.format(',') : d3.format('$');
            return format(value);
        }
    }
}
});

Answer 1

您可以使用 grouped: false 来分离工具提示的值，以便它们仅显示您将鼠标悬停的内容，如下所示:

    tooltip: {
grouped: false,
    format: {
        title: function (d) { return 'Data'},
        value: function (value, ratio, id) {
            var format = id === 'data1' ? d3.format(',') : d3.format('$');
            return format(value);
        }
    }
}

默认情况下，c3 将工具提示值分组在一起，此选项将它们分开:)