Странная проблема с угловым ChartJS, неправильно отображаемая в приложении Ionic

Question

Я создаю приложение Ionic с AngularJS. В этом приложении мне нужна линейная диаграмма данных. Вчера я задал вопрос об этом (Angular-Chart not rendering anything), на который был дан ответ, но теперь есть новая проблема.

Иногда диаграмма мгновенно видна, но когда я поворачиваю экран между пейзажем/портретом, он становится все больше поворота. Несколько раз график не отображается вообще (кроме легенды), пока вы не будете поочередно поворачивать экран.

Когда я проверяю его с помощью веб-инспектора на своем iPhone, я вижу, что атрибуты HTML для высоты становятся все больше и больше. То же самое для стиля CSS-height.

HTML, в веб-инспектор изначально выглядит следующим образом: (это когда график находится на вкладке неактивной)

<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> 

После того, что вкладка активна его HTML выглядит следующим образом:

<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> 

На этот раз график мгновенно виден, что не всегда так. Я думаю, что это связано с веб-инспектором. Когда я не открываю веб-инспектор, изначально видится только легенда.

После поворота на альбомную и обратно к портрету четыре раза, HTML выглядит следующим образом:

<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> 

Как вы можете видеть, высота становится больше каждый поворот.

HTML,-файл выглядит следующим образом:

<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> 

$scope.graph выглядит следующим образом:

$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 
    } 

и те ценности, приготовьтесь здесь:

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')); 
    } 
    }; 

который вызывается один раз запрос завершил загрузку, поэтому перед тем, как вкладка с графиком будет видна.

CSS-я подал заявку на холсте:

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

Я надеюсь, что проблема ясна, и что кто-то может помочь мне. Я пробовал все, что мог придумать. Если вам нужна дополнительная информация, дайте мне знать!

EDIT // Что-то примечание: когда я помещаю график на первую вкладку (которая изначально активна), график мгновенно виден, но имеет ту же странную проблему при увеличении размера окна браузера.

Answer 1

Попробуйте добавить плагин для переходов. надеюсь, что это работает. plugin documentation here

Answer 2

У меня была аналогичная проблема, а не на мобильном телефоне, но решение, которое я использовал, может помочь. Моя проблема заключалась в том, что после каждого перерисовки график всегда увеличивает свою высоту в 40 пикселей.

То, что я обнаружил при отладке, было то, что в диаграммах.Конструктор js получает значение, возвращаемое функцией computeDimension, и назначает его высоте холста. В моем случае проблема заключалась в том, что computeDimension возвращает offsetHeight, и это значение всегда было больше, чем свойство высоты холста.

Документов (https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight) говорят:

Как правило, offsetHeight такой элемент представляет собой измерение, которое включает в себя элемент границы, элемент вертикальный отступ, элемент горизонтальная полоса прокрутки (если она присутствует, если оно вынесено) и элемент CSS высота.

Итак, я проверил свой элемент холста и использовал прописку 20px. После установки дополнения к 0px проблема исчезла.

Постарайтесь наложить на ваш холст наложение 0px (или даже границу 0px).