C3.js responseive x axis timeseries

Question

Я пытаюсь создать график, который может хорошо выглядеть как на мобильном, так и на рабочем столе с помощью c3 (http://c3js.org/).

Однако у меня возникли проблемы с получением оси x, которая является таймером, для отображения размера изменения для мобильных устройств. Единственный способ, которым я смог это сделать, - уничтожить график и воссоздать его с нуля. Но это мешает мне добавить хороший переход к диаграмме, что было бы очень приятно иметь. [! [Вид рабочего стола] [1]] [1]

Я попытался с помощью клеща выбраковки вариант на оси х и установить максимальное значение 8, но эта опция игнорируется при использовании либо флеш() или изменить размер() методов.

Так что мой вопрос: Есть ли способ изменить значения оси 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; } 
}