c3js - D3js - Personnalisez les étiquettes dans un simple diagramme à barres

Question

Probablement la meilleure façon de fournir un contexte est montrant le code:

http://jsfiddle.net/ron_camaron/baa0q55j/12/

var arrayOfDates = ['Jun 2015', 'May 2015', 'Mar 2015', 'Feb 2015', 'Jan 2015', 'Dec 2014']; 
var arrayOfData = [7.25, 10.001, 10, 8.39, 10.002, 6.76] 
var cautionColor = '#AB2522'; 
var bronzeColor = '#8C7853'; 
var silverColor = '#CCCCCC'; 
var goldColor = '#FFCC00'; 
var neutralColor = "#ffffff"; 

var chart = c3.generate({ 
bindto: '#divForGraph_1', 
size: { 
    height: 203, 
    width: 380 
}, 
data: { 
    columns: [ 
     ['period'].concat(arrayOfData) 
    ] 
    , 
    types: { 
     period: 'bar' 
    } 
    , 
    labels: true 
    , 
    names: { 
     period: 'Scoring Table' 
    } 
    , 
    color: function (color, d) { 
     if (d.value < 4) { 
      return cautionColor; 
     } else if (d.value < 7) { 
      return bronzeColor; 
     } else if (d.value < 10) { 
      return silverColor; 
     } else if (d.value > 10 && d.value < 10.001) { 
      return neutralColor; 
     } else if (d.value >= 10.001) { 
      return neutralColor; 
     } 

     return goldColor; 
    } 
    , 
    axis: { 
     y: { 
      label: { 
       text: 'Scores', 
       position: 'inner-middle' 
      } 
     }, 
     x: { 
      type: 'timeseries', 
      tick: { 
       fit: true 
      } 
     } 
    } 
} 
, 
axis: { 
x:{ 
    type: 'category', 
    categories: arrayOfDates 
} 
} 
}); 

chart.axis.max({ 
y: 10.002 
}); 
chart.axis.min({ 
y: 0 
}); 

Dans ce graphique à barres, il y a quelques « spécial » valeurs. Je suis à la recherche d'un moyen de personnaliser ces valeurs comme suit:

• 10,001 = "N/S"
• 10,002 = "N/A"

Le reste des valeurs de 0 à 10 dans l'axe des y devrait rester comme ils sont.

Une autre exigence est que l'axe Y devraient montrer uniquement les valeurs de 0 à 10.

Modifier les DOM avec jQuery pourrait être une solution, mais il est une sorte de piratage, je voudrais obtenir le résultat en utilisant correctement l'API

Toute aide est appréciée!

Answer 1

Vous pouvez ajouter une méthode format pour vos étiquettes de données, comme si

... 
labels: { 
    format: function (v, id, i, j) { 
     if (v == 10.001) 
      return "N/S"; 
     else if (v == 10.002) 
      return "N/A"; 
     else 
      return v; 
    } 
} 
... 

Voir http://c3js.org/reference.html#data-labels-format

---

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