javascript - 奇怪的 Angular-ChartJS 问题，无法在 Ionic App 中正确显示

Question

我正在使用 AngularJS 构建一个 Ionic 应用程序。在这个应用程序中，我想要一个数据折线图。昨天我问了一个关于这个的问题 ( 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'));
    }
  };

一旦请求完成加载，即在带有图表的选项卡可见之前调用。

我为canvas申请的CSS是:

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

我希望问题很清楚并且有人可以帮助我。我已经尝试了我能想到的一切。如果需要更多信息，请告诉我!

编辑//需要注意的一点:当我将图表放在第一个选项卡(最初处于事件状态)时，图表立即可见，但它有同样奇怪的问题，即在调整浏览器窗口大小时变大..

Answer 1

尝试添加人行横道插件后。希望它有效。插件文档 here