Question

我正在使用AngularJS构建一个Ionic App。在这个应用程序中，我想要一个数据的折线图。昨天我问了一个关于这个的问题（Angular-Chart not rendering anything），这个问题得到了解答，但现在又出现了一个新问题。

有时候图表会立即可见，但是当我在横向/纵向之间旋转屏幕时，它会在每次旋转时变大。有些时候图形根本不可见（图例除外），直到你旋转屏幕几次。

当我在iPhone上使用网络检查器检查时，我发现每次高度的HTML属性都会变大。 CSS-height样式也是如此。

Web检查器中的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>

这次图表立即可见，但情况并非总是如此。我认为这与网络检查员有关。如果我没有打开Web检查器，则最初只能看到图例。

旋转到横向并返回肖像四次后，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;
}

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

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

Answer 1

尝试添加crosswalk插件后。希望它有效。插件文档here

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

1 个答案: