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

Question

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

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 将工具提示值组合在一起，此选项将它们分开:)

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

On C3js, how to make the tooltip on a bar chart display the data for just that bar as you hover over it?

javascript

jquery

c3.js