div*_*vya 5 angularjs morris.js
使用angularjs基于所选项目加载图表.如果我选择第一项我在控制器功能中获取详细信息正在显示它.当我选择下一项时,图形加载但首先选择项目详细信息不会破坏.如果我选择4项,则显示4次图表.如何清除莫里斯图表中的数据？
<!-- begin snippet: js hide: false console: true babel: false --> app.controller('MorrisCtrl', ['$rootScope', '$scope', '$state','loadhiscpuservice', function ($rootScope, $scope, $state,loadhiscpuservice) {
getgraphdetails();
$scope.getserverdetails = function (server) {
// $state.go($state.current);
$scope.serveridvalue = [];
var serverid = [];
$scope.serveridvalue = server;
serverid = $scope.serveridvalue.serverID;
var date = new Date();
$scope.formattedDate = $filter('date')(date, "dd/MM/yyyy hh:mm:ss a", 'UTC');
var date1 = $scope.formattedDate;
//chart1.destroy();
getgraphdetails(serverid, date1);
};
function getgraphdetails(serverid, date1) {
var details = { serverID: serverid, minutes: "180", date: "date1" };
loadhiscpuservice.getCPUvalues(details).
success(function (results) {
alert(results);
var value = JSON.parse(results);
drawMorrisCharts1(results);
})
.error(function (error) {
$scope.result = 'Error Occured : ' + error;
});
};
function drawMorrisCharts1(results2) {
var points = [];
points = results2;
Morris.Area({
element: 'area-chart2',
data: points,
xkey: 'lastUpdatedDateTime',
ykeys: ['value'],
labels: ['value'],
parseTime: false,
pointSize: 2,
hideHover: 'auto',
lineColors: [$rootScope.settings.color.themesecondary]
});
};
})
app.factory('loadhiscpuservice', function ($http) {
return {
//load d0ta service
getCPUvalues: function (details) {
var request = $http({
method: 'POST',
url: 'http//abc link',
data: { aaa: details.aaa, minutes: details.minutes, date: details.date }
});
return request;
}
};
});
Run Code Online (Sandbox Code Playgroud)
<! - 语言:lang-css - >'lib/jquery/charts/morris/raphael-2.0.2.min.js','lib/jquery/charts/morris/morris.js','app/controllers /morris.js'<! - 语言:lang-html - >
<div ng-controller="MorrisCtrl">
<div class="orders-container">
<div class="orders-header">
<h6>Servers List</h6>
</div>
<ul ui-sref-active="active" class="orders-list" onscroll="true">
<li class="order-item">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 item-left">
<div class="item-price">Servers: </div>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 item-right">
<div class="input-group">
<select ng-options="server.serverName for server in serverDetails1" class="form-control" ng-model="server" ng-change="getserverdetails(server)">
<option value="">--Select Server--</option>
</select>
<span class="input-group-addon">
<i class="fa fa-desktop"></i>
</span>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="row">
<div class="col-xs-12 col-md-12 col-lg-12">
<div id="area-chart2" class="chart chart-lg"></div>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
FRA*_* KK
15
我遇到了类似的问题..这就是我解决它的方式.在绘制新图表之前,请使用.empty清除div.
$("#area-chart2").empty();
Run Code Online (Sandbox Code Playgroud)
就这样.像魔术一样工作.
希望这能解决你的问题
归档时间：
查看次数：
4775 次
最近记录：
ngRoute为所有路由设置基本URL 52
如何在AngularJS中的多个模块之间共享单个指令 28
如何防止在angularjs中的数组推送重复 24
在AngularJS中初始化时将全局函数和数据附加到$ rootScope 16
角料设计中的纸叠(css3) 12
如何在$ mdDialog中向textContent添加换行符 11
如何从angular.js中的范围"删除"变量 10
AngularJS:将布尔值绑定到单选按钮,以便在取消选中事件时将模型更新为false 9
地理位置 - 使用Ionic Framework,AngularJS和Google API 8
用于Twitter Bootstrap网格系统的Cell Splitter 7