问题
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.
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.
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 && 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>
After making that tab active its HTML looks like this:
<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>
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.
After rotating to landscape and back to portrait four times, the HTML looks like this:
<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>
As you can see, the height gets bigger every rotation.
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>
The $scope.graph looks like this:
$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.
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..
回答1:
Try After adding crosswalk plugin. hope it works. plugin documentation here
回答2:
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.
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.
The docs (https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight) say:
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.
So, I checked my canvas element and it was using a padding of 20px. After setting the padding to 0px the problem was gone.
Try to force a 0px padding (or even a 0px border) on your canvas.
来源：https://stackoverflow.com/questions/29819173/strange-angular-chartjs-issue-not-displaying-correctly-in-ionic-app