9
我正在用AngularJS構建一個Ionic應用程序。在這個應用程序中，我想要一個數據線圖。昨天我問了一個關於這個（Angular-Chart not rendering anything）的問題，這個問題已經回答了，但是現在出現了一個新問題。奇怪的Angular-ChartJS問題，在Ionic App中無法正確顯示
有時圖表立即可見，但是當我在風景/肖像之間旋轉屏幕時，它每次旋轉都會變得越來越大。 直到您旋轉屏幕幾次，圖表根本不可見（圖例除外）。
當我使用我的iPhone上的網絡檢查器檢查出來時，我發現HTML的高度屬性每次都會變大。 CSS高度樣式相同。
在web的檢查員的HTML最初看起來像這樣：（這是當圖是不活動的標籤上）
<div ng-show="graph.visible && 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 && 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 && 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;
}
我希望這些問題是明確的，有人能幫助我。我嘗試了所有我能想到的。如果需要更多信息，請告訴我！
編輯//需要注意的是：當我將圖形放在第一個選項卡（最初是活動的）上時，圖形立即可見，但它具有調整瀏覽器窗口時變得更大的同樣的奇怪問題..
您是否添加了視口元標記以防止縮放？如果沒有，嘗試添加到HTML（頭）：' –
是的，它已經有了。 :-(另外，當'maintainAspectRatio'不是'false'時，圖形的高度爲0，在調整大小時也不會改變。 – JeroenJK