2015-09-14 24 views
5

Próbuję utworzyć wykres, który może wyglądać dobrze zarówno na telefonie komórkowym, jak i na komputerze stacjonarnym przy użyciu c3 (http://c3js.org/).Czas reakcji C3.js w osi X

Mam jednak problem z wyświetleniem osi X, która jest serią czasową, aby wyświetlić rozmiar zmiany dla urządzeń przenośnych. Jedynym sposobem, w jaki udało mi się to zrobić, jest zniszczenie wykresu i ponowne utworzenie go od zera. Ale to uniemożliwia mi dodanie miłego przejścia do wykresu, co byłoby naprawdę przyjemne. [! [Widok pulpitu] [1]] [1]

Próbowałem przy użyciu kleszcza uboju opcję na osi x oraz ustawić maksymalną wartość 8, ale opcja ta zostanie zignorowany podczas korzystania albo flush() lub metody resize().

Moje pytanie brzmi: Czy istnieje sposób na zmianę wartości osi X bez konieczności niszczenia wykresu i ponownego generowania go? http://imgur.com/EMECqqB

Odpowiedz

3

Użyłem onresized: function() {...}

lub można użyć onresize: function() { ... }

link

zmienić uboju max o zmienionym rozmiarze ekranu:

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

tu przykład : https://jsfiddle.net/07s4zx6c/2/

0

dodać mediaquery w zależności od wielkości urządzenia

tak.

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