comment faire cocher l'axe pour n'être qu'un entier?
ce que j'ai essayé est d'utiliser l'option tick:
tick: {
format: function(x) {
return (x == Math.floor(x)) ? x : "";
}
}
cela peut faire en sorte que l'étiquette affiche uniquement un entier, mais la ligne de division sur l'axe existe toujours.
existe-t-il un moyen de contrôler la graduation de l'axe?
sur la version de développement actuelle (maître), vous pouvez utiliser axis.y.values pour définir la liste des
{
axis: {
y: {
ticks: [1,2,3]
}
}
}
mais cela ne peut pas être dynamique basé sur la source de données, ai-je raison?
Vous pouvez calculer ces valeurs après le chargement des données, le définir sur chart.internal.config.axis_y_tick_values
, puis appeler chart.flush()
pour appliquer de nouvelles valeurs d'axe.
Et ce code?
axis: {
y: {
tick: {
format: function (x) {
if (x != Math.floor(x)) {
var tick = d3.selectAll('.c3-axis-y g.tick').filter(function () {
var text = d3.select(this).select('text').text();
return +text === x;
}).style('opacity', 0);
return '';
}
return x;
}
}
}
}
Cela semble déjà résolu, alors laissez-moi terminer.
FWIW, exiger de connaître les composants internes de D3 et exécuter JS semble vraiment étrange. Je vois beaucoup ce modèle dans ces problèmes de C3: quelqu'un a un problème, et au lieu d'offrir une option C3, 5-30 lignes de javascript qui manipulent le SVG sous-jacent sont avec d3 est la solution acceptée. Je pense qu'à long terme, cela va être un énorme préjudice pour l'adoption de C3.
Pour ce problème en particulier, une option "axis.y.tick.integer_only" serait d'une valeur incroyable. J'adorerais fournir une extension à C3 pour cela. Je vois un exemple d'extension ici . Y a-t-il un guide d'extension quelque part qui puisse me guider?
Merci!
Edit: grammaire.
Vous pouvez calculer ces valeurs après le chargement des données, le définir sur chart.internal.config.axis_y_tick_values, puis appeler chart.flush () pour appliquer de nouvelles valeurs d'axe.
En se référant à cela, parce que j'ai aussi eu ce problème aujourd'hui - faire flush()
gâcherait l'animation de la modification des données, et l'ajout d'un délai a également des problèmes graphiques. Cependant, définir chart.internal.config.axis_y_tick_values
à la bonne valeur avant d' appeler load()
fonctionne parfaitement. Peut-être que cela sera utile pour quelqu'un :).
Meilleure version:
axis: {
y: {
tick: {
format: function(x) { return x % 1 === 0 ? x : ''; }
}
}
}
Merci nnabinh - a travaillé un régal.
Commentaire le plus utile
Meilleure version: