0
Morrisグラフを使用していますが、グラフが表示されないという問題に直面しています。Morrisグラフが表示されず、ウィンドウのサイズ変更時にのみ表示されます
コードは以下の通りである:
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ファイル
アイコンをクリックは、折れ線グラフ要素が示されているが、グラフはshown.Only示されていないmyapp.controller('SuperUserController',function(dataFactory,Flash,$scope,$http){
$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);
}
}
})
ウィンドウのサイズを変更するとき。
Yes..Answerがright.my問題である
使用が解決されています。 – User101
ng-ifを使用すると、半分のグラフが表示され、ズームインまたはズームアウトするとフルグラフが表示されます。 – User101
ボタンのクリックイベントに基づいてグラフを読み込んでいる場合は、古いグラフを最初にクリアしてください。 –