C3 JS Ändern X Achse, tickende Werte lassen das Diagramm verschwinden

Question

Ich bin neu in Javascript, und ich habe einige Dinge herausgefunden, aber kann nicht herausfinden, warum die X-Achse eine harte Zeit hat zu ändern. Ich verwende die C3-Bibliothek, um die gestapelten Balkendiagramme zu erstellen. Wenn ich manuell versuchen, die Zecke auf ein Array von Werten zu ändern:

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

      }, 

Die Grafik wird nicht die Zecken auf der Achse ändern. Zeile 17 in der Codepen JS Codezeile, die ich versuchte, die X-Achse zu ändern. Jede Hilfe wäre willkommen.

Link zu Codepen

Answer 1

Erstens die tick Erklärung sollte nicht in der type Erklärung verschachtelt werden, sollten sie Geschwister voneinander entfernt sein. C3 wird nichts aufnehmen, was Sie in tick erklären.

Zweitens funktioniert values durch Abgleich mit Werten in der Datenreihe, die als x-Achsenwerte deklariert sind, wie Zahlen in einem normalen Diagramm oder Daten in einem Zeitreihendiagramm ->http://c3js.org/samples/axes_x_tick_values.html. Keine Ihrer Reihen ist so deklariert, dass sie die x-Achsenwerte enthält, und beide sind trotzdem numerische Daten, so dass Strings wie "Montag" usw. niemals übereinstimmen.

Drittens, das Codepen verwendet eine wirklich veraltete Version von c3 (ich musste es aktualisieren, um die Lösung unten zu funktionieren), so dass der c3-Code, der ausgeführt wurde, hoffnungslos veraltet gewesen wäre online eine der c3 docs

Was für hier Sie suchen ich vermute, ist die Kategorie Typ zu verwenden und die Kategorien so erklären:

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

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