C3.js responsive x Achse Zeitreihen

Question

Ich versuche, ein Diagramm zu erstellen, das sowohl auf Mobilgeräten als auch auf Desktops mit c3 (http://c3js.org/) gut aussehen kann.

Allerdings habe ich Probleme, die X-Achse, die eine Zeitreihe ist, die Änderungsgröße für mobile anzuzeigen. Die einzige Möglichkeit, dies zu erreichen, besteht darin, das Diagramm zu zerstören und es von Grund auf neu zu erstellen. Aber das hindert mich daran, einen schönen Übergang zum Chart hinzuzufügen, was sehr schön wäre. [! [Desktop Ansicht] [1]] [1]

Ich habe versucht, die Zecke mit auf der x-Achse Culling Option und legen Sie einen Maximalwert von 8, aber diese Option ignoriert wird, wenn entweder Flush() verwenden oder resize() Methoden.

Also meine Frage ist: gibt es eine Möglichkeit, die X-Achse Werte zu ändern, ohne den Graphen zu zerstören und neu zu generieren? http://imgur.com/EMECqqB

Answer 1

Ich habe die onresized: function() {...}

verwendet oder können Sie verwenden, um die onresize: function() { ... }

link

die Keulung max auf die Größe neu bestimmten Bildschirm zu ändern:

 axis: { 
      x: { 
       type: 'timeseries', 
       tick: { 
        culling: true, 
        format: '%m-%d', 
        fit:true, 
        culling: { 
         max: window.innerWidth > 500 ? 8 : 5 
        } 
       } 
      } 
     }, 

     onresized: function() { 
      window.innerWidth > 500 ? chart.internal.config.axis_x_tick_culling_max = 8 : chart.internal.config.axis_x_tick_culling_max = 5; 
     }, 

Hier ein Beispiel : https://jsfiddle.net/07s4zx6c/2/

Answer 2

mediaquery nach Gerätegröße

wie diese hinzuzufügen.

@media screen and (max-width:810px) { 
    .c3 svg { font: .8em sans-serif; } 
}