gridster c3 charts auto zmiana rozmiaru problemu

Question

Mam problem z wykresem rozmiarów wykresów c3 z w gridster. Czy ktoś może mi pomóc, w jaki sposób mogę zrobić tam wykresy, które mają być odpowiednio automatycznie przeskalowane zgodnie z polem siatki, w którym się znajdują? Proszę znaleźć Plunker

dałem rozmiar w opcji:

size: { 
     height: 100, 
     width: 100 
    } 

Jeśli usunąć tę właściwość rozmiar wykresy idą z pudełka. Ale są one zbyt małe w pudełkach z siatkami. Jak mogę uczynić te wykresy automatycznie zajmującymi pełną wysokość i szerokość pudełek w siatce, w których się znajdują?

Answer 1

Niedawno miałem podobny problem. To, co zrobiłem, to: scale(), ale nie działa na firefox.

Zasadniczo znajdź szerokość podczas ładowania i ustaw nową skalę, gdy użytkownik zmieni rozmiar ekranu (lub dowolne inne zdarzenie, takie jak zmiana rozmiaru pojemników).

dodać to na dole plunker:

<script> 

    let width = window.innerWidth; 

    window.addEventListener('resize', (event) => { 
     let newWidth = window.innerWidth; 
     let ratio = newWidth/width; 
     let ctnr = document.getElementById('widget1'); 

     ctnr.style.transform = "scale(" + ratio + ")"; 

    }); 
</script> 

To będzie skalować widget 1. Oczywiście można grać z numerami trochę aby znaleźć to, co działa dla Ciebie.

Widżet pozostanie jednak w miejscu; Zatem, jeśli ma to być wyrównany w lewo można użyć w css:

transform-origin: 0; 

Mam nadzieję, że to pomaga.

Answer 2

Opcje używasz:

size: { 
    height: 100, 
    width: 100 
} 

ustawiania wysokości i szerokości elementu svg do 100px zamiast 100% Próbowałem

size: { 
    height: '100%', 
    width: '100%' 
} 

Które z powodzeniem ustawić width do 100% ale w jakiś sposób height zostanie ustawione na 320px

Więc jeśli dodać to do Twojego CSS:

.c3 svg { 
    width: 100%; 
    height: 100%; 
} 

To rozwiąże problem zaklejania.

EDIT

Wystarczy mała zmiana skonfigurować początkową wielkość i niektóre komentarze dodane do kontrolera na zmiany rozmiaru - stop obsługi zdarzeń, gdzie trzeba będzie dodać jakieś zmiany rozmiaru wykresów oparte na nowe rozmiary. See it here

resizable: { 
    enabled: true, 
    handles: ['n', 'e', 's', 'w', 'ne', 'se', 'sw', 'nw'], 

    // optional callback fired when resize is started 
    start: function(event, $element, widget) {}, 

    // optional callback fired when item is resized, 
    resize: function(event, $element, widget) {}, 

    // optional callback fired when item is finished resizing 
    stop: function(event, $element, widget) { 
     // here should update the size according to the widget size 
     // widget.sizeX (* 160px) and widget.sizeY (* 160px) 
     // and further adjustments 
    } 
    }, 

Answer 3

Zastosowanie nvd3 plugin ten jest taki sam jak ten plugin c3 również płynnie współpracuje z gridster, proszę znaleźć link poniżej

https://krispo.github.io/angular-nvd3/#/dashboard