C3 JS Changez l'axe X, le fait de cocher des valeurs fait disparaître le graphique

Question

Je suis nouveau sur Javascript, et j'ai compris peu de choses, mais je n'arrive pas à comprendre pourquoi l'axe X a du mal à changer. J'utilise la bibliothèque C3 pour faire les graphiques à barres empilés. Lorsque je tente de modifier manuellement la tique à un tableau de valeurs:

axis: { 
     x : { 
      type : { 
       tick: { 
        // values: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'], 
        multiline:false, 
        culling: { 
         max: 1 
        }, 
       }, 
      }, 
      label : { 
       text: 'Days', 
       position: 'center-bottom', 

      }, 

Le graphique ne changera pas les tiques sur l'axe. Ligne 17 dans la ligne de code Codepen JS que j'ai essayé de changer l'axe X. Toute aide serait appréciée.

Lien vers Codepen

Answer 1

Tout d'abord, la déclaration tick ne doit pas être imbriquée dans la déclaration type, ils doivent être frères et sœurs les uns des autres. C3 ne ramassera pas tout ce que vous déclarez en tick à cause de cela.

Deuxièmement, values fonctionne en faisant correspondre les valeurs de la série de données déclarées comme contenant les valeurs de l'axe x, comme les nombres dans un graphique normal, ou les dates dans un graphique chronologique ->http://c3js.org/samples/axes_x_tick_values.html. Aucune de vos séries n'est déclarée comme contenant les valeurs de l'axe x, et les deux sont des données numériques de toute façon, donc les chaînes comme "Monday" etc. ne correspondront jamais. Troisièmement, ce codepen utilisait une version vraiment obsolète de c3 (je devais la mettre à jour pour que la solution ci-dessous fonctionne), donc le code c3 qui était en cours d'exécution aurait été désespérément obsolète l'un des c3 docs en ligne

Qu'est-ce que vous cherchez ici, je pense est d'utiliser le type de catégorie et déclarer les catégories comme autant:

  x : { 
      type: 'category', 
      categories: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] 
      tick: { 
       multiline:false, 
       culling: { 
        max: 1 
       }, 
      }, 
     }, 
     ... etc etc... 
    }, 

Voir https://codepen.io/anon/pen/PjNKya