Info-bulle personnalisée pour les séries multiples xy

Question

J'utilise ce code pour personnaliser une info-bulle sur un diagramme de dispersion xy multiligne. Comment est-ce que je modifierais l'info-bulle afin que chaque série ait son propre label unique, nameArr, nameArr1, nameArr2 ...? JSFiddle

tooltip: { 
    format: { 
     title: function(x) { 
      var indOfVal = engagmentArr.indexOf(x); 
      return nameArr[indOfVal - 1] 
     }, 
     name:function(){ 
     return engagmentArr[0]; 
     } 
    }, 
}, 

Answer 1

solution générale est de stocker infobulles séparément du tableau de points lui-même.

et d'y accéder par id groupe et index de données:

var tooltips = { 
    mention1: ['ROA=5.1%','ROA=8.1%','ROA=4.1%','ROA=10.1%'], 
    mention2: ['ROA=5.1%','ROA=8.1%','ROA=4.1%','ROA=10.1%'], 
    mention3: ['2000 ROA=2.2%','2001 ROA=8.2%','2002 ROA=5.2%','2005 ROA=12.2%'], 
    mention4: ['2000 ROA=2.2%','2001 ROA=8.2%','2002 ROA=5.2%','2005 ROA=12.2%'] 
} 

var chart = c3.generate({ 
    data: { 
     xs: { 
      mention1: 'engagement1', 
      mention2: 'engagement2', 
      mention3: 'engagement3', 
      mention4: 'engagement4' 
     }, 

     columns: [ 
      ['engagement1', 140, 150, 157, 220], 
      ['mention1', 2237, 4456, 3300, 1453], 
      ['engagement2', 40, 50, 57, 120], 
      ['mention2', 2237, 4456, 3300, 1453], 
      ['engagement3', 150, 155, 165, 230], 
      ['mention3', 2037, 4756, 3100, 1053], 
      ['engagement4', 50, 55, 65, 130], 
      ['mention4', 2037, 4756, 3100, 1053] 
     ], 
     type: 'scatter' 
    }, 
    point: { 
     r: function(d) { 
      return d.value * 0.005; 
     }, 
    }, 
    tooltip: { 
     contents: function (d) { 
      var id = d[0].id;     // 'mention1', 'mention2' ... 
      var index = d[0].index;    // 1,2,3,4 ... 

      // replace plain data with custom markup or copy c3's default 
      return tooltips[id][index];   // 'ROA=...' 
     } 
    } 
}); 

Voir fiddle