c3.js - c3 graphique avec une info-bulle avec un graphique c3 à l'intérieur

Question

J'ai un graphique linéaire c3.js qui représente l'évolution de 2 valeurs. J'ai besoin que l'info-bulle du graphique linéaire soit un graphique à secteurs (tooltip = un autre graphique c3.js).

Voici ce que je réussissais:

http://jsfiddle.net/owhxgaqm/80/

// c3 - custom tooltip 
function generateGraph(data1,data2) { 
console.log(data1.name + '\t' + data1.value + '\t' + data2.name + '\t' + data2.value); 
var chart1 = c3.generate(
      { 
       bindto: "#t", 
       data: {columns : [[data1.name, data1.value],[data2.name, data2.value]], 
        type : 'pie'}   
      }); 
} 
var chart = c3.generate({ 
    data: { 
     columns: [ 
      ['data1', 1000, 200, 150, 300, 200], 
      ['data2', 400, 500, 250, 700, 300], ] 
    }, 
    tooltip: { 
     contents: function (d, defaultTitleFormat, defaultValueFormat, color) { 
       generateGraph(d[0], d[1]); 
      var divt = document.getElementById("t"); 
      return ''; 


     } 
    } 
}); 

Comme vous pouvez le voir, je suis liant les « info-bulle » avec un div déjà existant si ce n'est pas vraiment ce que je veux de c3. js.

Toute idée est la bienvenue.

Merci.

Answer 1

Ajout d'un graphique dans un C3 infobulle

Vous pouvez utiliser l'élément infobulle c3 a déjà. Dans la fonction de contenu, appelez la fonction generateGraph (voir l'étape suivante). Transmettez l'élément d'info-bulle disponible dans this.tooltip en plus des données.

... 
    tooltip: { 
     contents: function (d) { 
      // this creates a chart inside the tooltips 
      var content = generateGraph(this.tooltip, d[0], d[1]) 
      // we don't return anything - see .html function below 
     } 
    } 
    ... 

---

Votre fonction generateGraph crée essentiellement un tableau de c3 dans votre élément infobulle (bindto supporte un élément d3). Nous faisons un peu d'optimisation (si les données sont identiques, le graphique n'est pas recréée) et le nettoyage (lorsqu'un graphique est recréée il est détruit et retiré du DOM)

function generateGraph(tooltip, data1, data2) { 
    // if the data is same as before don't regenrate the graph - this avoids flicker 
    if (tooltip.data1 && 
     (tooltip.data1.name === data1.name) && (tooltip.data1.value === data1.value) && 
     (tooltip.data2.name === data2.name) && (tooltip.data2.value === data2.value)) 
     return; 
    tooltip.data1 = data1; 
    tooltip.data2 = data2; 

    // remove the existing chart 
    if (tooltip.chart) { 
     tooltip.chart = tooltip.chart.destroy(); 
     tooltip.selectAll('*').remove(); 
    } 

    // create new chart 
    tooltip.chart = c3.generate({ 
     bindto: tooltip, 
     size: { 
      width: 200, 
      height: 200 
     }, 
     data: { 
      columns: [[data1.name, data1.value], [data2.name, data2.value]], 
      type: 'pie' 
     } 
    }); 
    // creating a chart on an element sets its position attribute to relative 
    // reset it to absolute (the tooltip was absolute originally) for proper positioning 
    tooltip.style('position', 'absolute'); 
} 

Notez que nous avons établi la taille du tableau de sorte qu'il ressemble plus à du contenu d'info-bulle qu'à un sous-diagramme.

---

Le dernier bit est un peu hacky - car c3 exige que nous fixons un HTML (que nous ne voulons pas faire) et parce que nous n'avons pas d'autres callbacks nous pouvons facilement accrocher à après la gestionnaire de contenu, il faut désactiver la fonction c3 utilise pour définir le contenu HTML sur l'info-bulle (cela affectera seulement infobulle de ce tableau), à savoir .tooltip.html

// MONKEY PATCHING (MAY break if library updates change the code that sets tooltip content) 
// we override the html function for the tooltip to not do anything (since we've already created the tooltip content inside it) 
chart.internal.tooltip.html = function() { 
    // this needs to return the tooltip - it's used for positioning the tooltip 
    return chart.internal.tooltip; 
} 

---

Fiddle - http://jsfiddle.net/muuqvf1a/

---

infobulle Positionnement

Au lieu d'utiliser le positionnement de infobulle de c3 vous pouvez aussi la taille et la position du infobulle au bas du tableau. Juste style .c3-tooltip-container.

Alternatives

Notez que c3 également soutenir les sous-diagrammes (http://c3js.org/reference.html#subchart-show) et data.mouseover (http://c3js.org/reference.html#data-onmouseover) qui pourrait aussi être un avenues propres à explorer.