创建自定义工具提示数据 C3 饼图

Question

我正在尝试在 C3 饼图 (source) 上创建详细的工具提示，这里是我的起始代码：

var chart = c3.generate({
     data: {
         columns: [
             ['Error', 72,15,11],
             ['Success', 58,42,5],
        ],
        type : 'pie'
     },
     tooltip: {
         format: {
             title: function (d) { return 'Data ' + d; },
             name : function(name) { return  name; }
         }
     } 
});

这是我要显示的内容：

我尝试使用 no-success

中的数据数组

 columns: [
        ['Error': {name : 'Stage 1', value : 72},{name : 'Stage 2', value : 15},{name : 'Stage 3', value : 11}],
        ['Success': {name : 'Stage 1', value : 58},{name : 'Stage 2', value : 42},{name : 'Stage 3', value : 5}],
    ],

这是我的JSFiddle

Answer 1

饼图似乎没有实现 grouping the tooltip。
我发现唯一可行的方法是复制数据数组和 return 自定义工具提示：

var columns =  [
             ['Error', 72,15,11],
             ['Success', 58,42,5], ];

var chart = c3.generate({
     data: {
         columns: [
             ['Error', 72,15,11],
             ['Success', 58,42,5],
        ],
        type : 'pie'
     },
     tooltip: {
       contents: function() { 
        return "<p>" + columns[0][0] + "<span>" + columns[0][1] + "</span></p>"
                     + "</br>" +
               "<p>" + columns[1][0] + "<span>" + columns[1][1] + "</span></p>"
       } 
     } 
});

现在你明白了。根据您的喜好自定义您的工具提示。

创建自定义工具提示数据 C3 饼图

Create custom tooltip data C3 pie chart

javascript

charts

pie-chart

c3.js