我要建一个离子应用与AngularJS。在此应用程序我想数据线图。昨天我问了这个问题（Angular-Chart没有渲染这是什么回答），但现在有一个新的问题。

I'm building an Ionic App with AngularJS. In this App I want a line-chart of data. Yesterday I asked a question about this (Angular-Chart not rendering anything) which was answered, but now there's a new problem.

有时候图表立即可见的，但是当我旋转横向/纵向之间的屏幕它使越来越大的每转动。其他一些倍图是完全不可见的（除了图例），直到你旋转屏幕一些时间。

Sometimes the chart is instantly visible, but when I rotate the screen between landscape/portrait it keeps getting bigger every rotation. Some other times the graph is not visible at all (except for the legend) till you rotate the screen some times.

当我检查出来与我的iPhone Web检查我看到的HTML属性的高度变大每次。同为CSS-高度的风格。

When I check it out with the web inspector on my iPhone I see that the HTML-attributes for height gets bigger everytime. Same for the CSS-height style.

在网上督察的HTML最初看起来是这样的：（这是当图是一个无效选项卡上）

The HTML in the web-inspector initially looks like this: (this is when the graph is on an inactive tab)

<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看起来像这样经过：

After making that tab active its HTML looks like this:

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

此时间的曲线是即刻可见的，这并不总是如此。我认为有与网络督察办。当我没有在网络督察开放，只有传说最初是可见的。

This time the graph is instantly visible, which is not always the case. I think that has to do with the web-inspector. When I don't have the web inspector open, only the legend is initially visible.

旋转到横向和回纵向四次后，HTML是这样的：

After rotating to landscape and back to portrait four times, the HTML looks like this:

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

正如你所看到的，高度变大每次旋转。

As you can see, the height gets bigger every rotation.

中的HTML文件看起来是这样的：

The HTML-file looks like this:

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

和这些价值观得到这里设置：

and those values get set here:

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

一旦请求完成加载这就是所谓的，所以用图的标签之前甚至可见。

which is called once a request has finished loading, so before the tab with the graph is even visible.

我已经申请了帆布的CSS是：

The CSS I have applied for canvas is:

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

我希望这些问题是明确的，有人能帮助我。我用尽了一切我能想到的。如果需要任何更多的信息，让我知道！

I hope the problem is clear and that someone can help me out. I've tried everything I could think of. If any more info is needed, let me know!

编辑//一些需要注意的：当我把第一个选项卡上图（这是最初活跃）图为立即可见的，但它有调整浏览器窗口时挺大同样奇怪的问题..

EDIT// Something to note: when I put the graph on the first tab (which is initially active) the graph is instantly visible, but it has the same strange issue of getting bigger when resizing the browser window..

推荐答案

我有一个类似的问题，无法在手机上，但我用可以帮助解决。我的问题是，每个重绘后，该图表总是增加其在40像素的高度。

I had a similar problem, not on mobile, but the solution I used may help. My problem was that after each redraw, the graph always increases its height in 40px.

我发现在调试是，Charts.js的构造得到重视computeDimension函数的返回值，并将其分配到画布的高度。这个问题，在我的情况，是computeDimension返回的offsetHeight并将此值也恰好是永远比画布'height属性越大。

What I found while debugging was that the Charts.js's constructor gets the value returned by computeDimension function and assign it to the canvas' height. The problem, in my case, was that computeDimension returns the offsetHeight and this value did happen to be always greater than the canvas' height property.

该文档（ https://developer.mozilla.org / EN-US /文档/网络/ API / HTML元素/的offsetHeight ）说：

典型地，元素的的offsetHeight是一个测量，它包括  该元件的边界，所述元件垂直填充，该元件  水平滚动条（如果present，如果渲染）和元素的CSS  高度。

Typically, an element's offsetHeight is a measurement which includes the element borders, the element vertical padding, the element horizontal scrollbar (if present, if rendered) and the element CSS height.

所以，我检查了我的画布元素，它使用20像素的填充。设置填充为0px问题之后就消失了。

So, I checked my canvas element and it was using a padding of 20px. After setting the padding to 0px the problem was gone.

尝试强制0像素填充（甚至是0像素边框）的画布上。

Try to force a 0px padding (or even a 0px border) on your canvas.