我正在使用莫里斯图,我面临的问题是,该图没有显示,它只显示当我调整窗口大小,如放大或缩小。
代码如下:
HTML网页
<div class="content" ng-controller="SuperUserController">
<LineChart xkey="xkey" ykeys="ykeys" labels="labels" ng-show="lineChart" ></LineChart>
<i class="fa fa-area-chart" ng-click="graphSet(1)"></i>
</div
角形js文件
$scope.graph=true;
$scope.lineChart = false;
$scope.xkey = 'xAxis';
$scope.ykeys = ['yAxis'];
$scope.labels = ['unit'];
$scope.myModel = [];
$scope.graphSet=function($id) {
$scope.deviceId=$id;
dataFactory.httpRequest('/graph/yesterday/' + $id).then(function (data) {
if (Object.keys(data).length !== 0) {
$scope.graph = true;
$scope.lineChart = true;
$scope.myModel = data;
}
});
}
myapp.directive('linechart',function(){ //directive name must be in small letters
return {
// required to make it work as an element
restrict: 'E',
template: '<div></div>',
replace: true,
link:function($scope,element,attrs)
{
var data = $scope[attrs.data],
xkey = $scope[attrs.xkey],
ykeys = $scope[attrs.ykeys],
labels = $scope[attrs.labels];
$scope.$watch("myModel", function (newValue) {
data = newValue;
console.log(newValue);
Linechart.setData(newValue);
});
config = {
element: element,//element means id #
data: data,
xkey: xkey,
ykeys: ykeys,
labels: labels,
parseTime: false,
pointFillColors: ['#D58665'],
lineColors: ['#0b62a4'],
smooth: true,
hideHover: 'auto',
pointSize: 4,
axes: true,
resize: true,
fillOpacity: 1.0,
grid: true,
}
Linechart = Morris.Line(config);
}
}
})
当我按一下缐条图图标时,会显示元素,但不会显示图形。只有在调整视窗大小时才会显示图形。
2条答案
按热度按时间xqnpmsa81#
我也有同样的问题
请使用ng-if=“线条图表”而不是ng-show=“线条图表”
deyfvvtc2#
我这样做,它的工作。
使用setTimeout确保SVG已呈现