Problema di Angular-ChartJS strano, non visualizzato correttamente nell'app ionica

Question

Sto costruendo un'app Ionic con AngularJS. In questa app voglio un grafico a linee di dati. Ieri ho fatto una domanda su questo (Angular-Chart not rendering anything) a cui è stata data una risposta, ma ora c'è un nuovo problema.

A volte il grafico è immediatamente visibile, ma quando ruoto lo schermo tra paesaggio/ritratto, aumenta ogni rotazione. Alcune volte il grafico non è visibile affatto (tranne la legenda) finché non si ruota lo schermo alcune volte.

Quando eseguo il check-out con il web inspector sul mio iPhone, vedo che gli attributi HTML per l'altezza aumentano di volta in volta. Lo stesso per lo stile di altezza CSS.

L'HTML in web-ispettore inizialmente assomiglia a questo: (questo è quando il grafico è su una scheda inattiva)

<div ng-show="graph.visible &amp;&amp; finishedLoading" class="ng-hide" style=""> 
    <div class="chart-container"><canvas class="chart chart-line" data="graph.data" labels="graph.labels" options="graph.options" series="graph.series" colours="graph.colours" getcolour="graph.getColour" click="graph.click" hover="graph.hover" legend="graph.legend" width="576" height="424" style="width: 288px; height: 212px;"> 
    </canvas><chart-legend><ul class="line-legend"><li><span style="background-color:rgba(70,191,189,1)"></span>Waarde</li><li><span style="background-color:rgba(247,70,74,1)"></span>Bovengrens</li><li><span style="background-color:rgba(253,180,92,1)"></span>Ondergrens</li></ul></chart-legend></div> 
</div> 

Dopo aver effettuato tale scheda attiva suo HTML assomiglia a questo:

<div ng-show="graph.visible &amp;&amp; finishedLoading" class="" style=""> 
    <div class="chart-container"><canvas class="chart chart-line" data="graph.data" labels="graph.labels" options="graph.options" series="graph.series" colours="graph.colours" getcolour="graph.getColour" click="graph.click" hover="graph.hover" legend="graph.legend" width="576" height="424" style="width: 288px; height: 212px;"> 
    </canvas><chart-legend><ul class="line-legend"><li><span style="background-color:rgba(70,191,189,1)"></span>Waarde</li><li><span style="background-color:rgba(247,70,74,1)"></span>Bovengrens</li><li><span style="background-color:rgba(253,180,92,1)"></span>Ondergrens</li></ul></chart-legend></div> 
</div> 

Questa volta il grafico è immediatamente visibile, il che non è sempre il caso. Penso che abbia a che fare con il web-inspector. Quando non sono aperte le web inspector, solo la legenda è inizialmente visibile.

Dopo la rotazione in orizzontale e di nuovo al ritratto quattro volte, il codice HTML simile a questo:

<div ng-show="graph.visible &amp;&amp; finishedLoading" class="" style=""> 
    <div class="chart-container"><canvas class="chart chart-line" data="graph.data" labels="graph.labels" options="graph.options" series="graph.series" colours="graph.colours" getcolour="graph.getColour" click="graph.click" hover="graph.hover" legend="graph.legend" width="576" height="816" style="width: 288px; height: 408px;"> 
    </canvas><chart-legend><ul class="line-legend"><li><span style="background-color:rgba(70,191,189,1)"></span>Waarde</li><li><span style="background-color:rgba(247,70,74,1)"></span>Bovengrens</li><li><span style="background-color:rgba(253,180,92,1)"></span>Ondergrens</li></ul></chart-legend></div> 
</div> 

Come si può vedere, l'altezza diventa più grande ogni rotazione.

Il file HTML si presenta così:

<div ng-show="graph.visible && finishedLoading"> 
    <canvas 
    class="chart chart-line" 
    data="graph.data" 
    labels="graph.labels" 
    options="graph.options" 
    series="graph.series" 
    colours="graph.colours" 
    getColour="graph.getColour" 
    click="graph.click" 
    hover="graph.hover" 
    legend="graph.legend"> 
    </canvas> 
</div> 

Il $scope.graph assomiglia a questo:

$scope.graph = { 
    data: [ 
     [], // value 
     [], // upper value 
     [] // lower value 
    ], 
    labels: [], 
    options: { 
     animation: false, 
     pointDotRadius : 2, 
     datasetFill : false, 
     responsive: true, 
     maintainAspectRatio: false, 
     scaleGridLineColor : 'rgba(0, 0, 0, .1)', 
     showTooltips: false 
    }, 
    series: ['Waarde', 'Bovengrens', 'Ondergrens'], 
    colours: ['#46BFBD', '#F7464A', '#FDB45C'], 
    // getColour: 
    // click: 
    // hover: 
    legend: true, 
    visible: false 
    } 

e quei valori vengono impostati qui:

function loadGraphData() { 
    $scope.graph.data = [ 
     [], // value 
     [], // upper value 
     [] // lower value 
    ]; 
    $scope.graph.labels = []; 

    for (var key in $scope.results) { 
     var result = $scope.results[key]; 

     $scope.graph.data[0].push(result.value); 
     $scope.graph.data[1].push(result.high); 
     $scope.graph.data[2].push(result.low); 

     $scope.graph.labels.push($filter('date')(result.date, 'dd MMM HH:mm')); 
    } 
    }; 

che si chiama una volta una richiesta ha terminato il caricamento, quindi prima ancora che la scheda con il grafico sia visibile.

Il CSS ho applicato per la tela è:

canvas { 
    width: 100%!important; 
    height: 100%!important; 
} 

Spero che il problema è chiaro e che qualcuno mi può aiutare. Ho provato tutto quello che potevo pensare. Se sono necessarie ulteriori informazioni, fammi sapere!

EDIT // Qualcosa da notare: quando metto il grafico sulla prima scheda (che è inizialmente attiva) il grafico è immediatamente visibile, ma ha lo stesso strano problema di ingrandirsi quando ridimensiona la finestra del browser.

Answer 1

Prova Dopo aver aggiunto il plug-in crosswalk. spero funzioni. documentazione plugin here

Answer 2

Ho avuto un problema simile, non sul cellulare, ma la soluzione che ho usato potrebbe aiutare. Il mio problema era che dopo ogni ridisegno, il grafico aumenta sempre la sua altezza in 40px.

Quello che ho trovato durante il debug era che i grafici.Il costruttore js ottiene il valore restituito dalla funzione computeDimension e lo assegna all'altezza della tela. Il problema, nel mio caso, era che computeDimension restituisce l'offsetHeight e questo valore è sempre stato maggiore della proprietà height della canvas.

La documentazione (https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight) dicono:

Tipicamente, offsetHeight di un elemento è una misura che include gli elementi dei bordi, l'elemento di imbottitura verticale, l'elemento scorrimento orizzontale (se presente, se resa) e l'elemento Altezza CSS .

Quindi, ho controllato il mio elemento canvas e utilizzava una spaziatura di 20px. Dopo aver impostato il padding su 0px il problema era sparito.

Provare a forzare un padding 0px (o anche un bordo 0px) sulla tela.