C3: entier uniquement des axes x, y

Créé le 15 oct. 2014  ·  9Commentaires  ·  Source: c3js/c3

comment faire cocher l'axe pour n'être qu'un entier?
qq 20141015141217

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.
qq 20141015141829

existe-t-il un moyen de contrôler la graduation de l'axe?

question resolved maybe

Commentaire le plus utile

Meilleure version:

    axis: {
        y: {
            tick: {
                format: function(x) { return x % 1 === 0 ? x : ''; }
            }
        }
    }

Tous les 9 commentaires

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.

Cette page vous a été utile?
0 / 5 - 0 notes

Questions connexes

MarcusJT picture MarcusJT  ·  4Commentaires

zachallia picture zachallia  ·  3Commentaires

kethomassen picture kethomassen  ·  3Commentaires

mwho picture mwho  ·  3Commentaires

wojciechowskid picture wojciechowskid  ·  3Commentaires