c3 js: Comment puis-je regrouper par Année sur les étiquettes de l'axe X?

Question

Utilisation de la bibliothèque c3 js pour les graphiques (c3js.org). Je suis d'essayer d'obtenir quelque chose de similaire à ce tableau (càd, ajoutez l'étiquette de l'année 2011, 2012, 2013 sur une ligne séparée après Q1, Q2, Q3, Q4)

var chart = c3.generate({ 
data: { 
    x: 'x', 
    columns: [ 
     ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2014-01-04', '2014-01-05', '2014-01-06'], 
     ['data1', 30, 200, 100, 400, 150, 250], 
     ['data2', 130, 340, 200, 500, 250, 350] 
    ] 
}, 
axis: { 
    x: { 
     type: 'timeseries', 
     tick: { 
      format: '%Y-%m-%d' 
     } 
    } 
} 
}); 

spectacle est l'axe x par an chaque étiquette au format année-mois-jour. Je veux montrer juste le mois et la date sur la première ligne de l'étiquette et l'année dans la ligne suivante (sans répétition). Un peu comme:

format: function(){ 
    var label = '%m-%d'; 
    if(year!written) 
      label +='%Y'; 
    return label; 
} 

Answer 1

Vous pouvez le faire en utilisant le format de tick pour écrire les étiquettes

... 
tick: { 
    culling: false, 
    count: (x.length - 1) * 2 - 1, 
    format: function (d) { 
     // show the year in place of Jul 
     if (d.getMonth() === 6) 
      return d.getFullYear(); 
     // ignore other non quarter months 
     else if ([1, 4, 7, 10].indexOf(d.getMonth()) === -1) 
      return ''; 
     // quarter months 
     else 
      return 'Q' + parseInt(d.getMonth()/3 + 1); 
    } 
} 
... 

où x est le tableau la date d'étiquettes

---

Ensuite, en utilisant d3 pour sélectionner et repousser un peu les étiquettes de l'année

// push the years down 
d3.selectAll('#chart .tick text tspan')[0].forEach(function (d) { 
    var tspan = d3.select(d); 
    if (!isNaN(Number(tspan.text()))) 
     tspan.attr('dy', '2em') 
    else 
     tspan.attr('dy', '0.5em') 
}) 

où chart est l'ID du conteneur graphique

---

Et cachant enfin toutes les marques de tiques (ou vous pouvez utiliser le CSS nième de type sélecteur pour masquer/afficher ceux que vous ne voulez pas)

#chart .tick line { 
    display:none; 
} 

---

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

Je vais avoir des problèmes intermittents avec le Fiddle ne pas pousser les étiquettes ne wn quand vous courez, mais cela ne se produit pas en dehors du violon. Donc, si vous ne voyez pas les étiquettes d'axe qui descendent, il suffit de copier le code dans un fichier HTML local et cela fonctionnera.

---