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

【问题标题】：Strange Angular-ChartJS issue, not displaying correctly in Ionic App奇怪的 Angular-ChartJS 问题，在 Ionic App 中无法正确显示
【发布时间】：2015-07-01 09:16:30
【问题描述】：

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

有时图表会立即可见，但是当我在横向/纵向之间旋转屏幕时，每次旋转都会变大。有时，在您旋转屏幕几次之前，图表根本不可见（图例除外）。

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

web-inspector 中的 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;
}

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

EDIT// 需要注意的一点：当我将图表放在第一个选项卡（最初是活动的）上时，图表立即可见，但是在调整浏览器窗口大小时它会出现同样奇怪的问题。..

【问题讨论】：

您是否添加了视口元标记以防止缩放？如果没有，请尝试将其添加到 html (head)：<meta name="viewport" content="initial-scale=1, maximum-scale=1">
是的，它已经有了。 :-( 另外，当maintainAspectRatio 不在false 上时，图形的高度为0，在调整大小时也不会改变。

标签： javascript html angularjs ionic-framework

【解决方案1】：

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

【讨论】：

【解决方案2】：

我遇到了类似的问题，但不是在移动设备上，但我使用的解决方案可能会有所帮助。我的问题是，每次重绘后，图表的高度总是增加 40px。

我在调试时发现 Charts.js 的构造函数获取了 computeDimension 函数返回的值并将其分配给画布的高度。就我而言，问题是 computeDimension 返回 offsetHeight 并且这个值确实总是大于画布的 height 属性。

文档 (https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight) 说：

通常，元素的 offsetHeight 是一个测量值，其中包括元素边框，元素垂直填充，元素水平滚动条（如果存在，如果呈现）和元素 CSS 高度。

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

尝试在画布上强制使用 0px 填充（甚至是 0px 边框）。

【讨论】：