C3.jsが応答するx軸の時系列

Question

私はc3（http://c3js.org/）を使ってモバイルとデスクトップの両方で良好に見えるグラフを作成しようとしています。

しかし、モバイル用の変更サイズを表示するためには、時代遅れのx軸を取得できません。私がこれをやってきた唯一のやり方は、グラフを破壊して、最初からそれを再作成することです。しかし、これは私がチャートに素敵なトランジションを追加することを妨げます。 [！[デスクトップの表示] [1] [1]

私は8の最大値をx軸上のオプションを淘汰し、設定目盛りを使用してみましたが、どちらかフラッシュを使用している場合、このオプションは（無視されます）またはresize（）メソッド。

私の質問は：グラフを破棄して再生成することなくx軸の値を変更する方法はありますか？

http://imgur.com/EMECqqB

Answer 1

私はonresized: function() {...}

使用しているか、サイズ変更され、画面上のカリング最大を変更するonresize: function() { ... }

link

を使用することができます。

 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; 
     }, 

ここでは一例：https://jsfiddle.net/07s4zx6c/2/

Answer 2

デバイスのサイズのような

に従ってmediaqueryを加えます。

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