我正在使用angularjs flot和slider显示一些图表，并且基于范围选择，数据可视化应该在浮点图中更改。
我的问题是，根据范围选择来可视化数据的最佳方法是什么？每当选择范围时，是否需要添加/删除浮点图数据，还是有更好的方法？我在下面提供我的源代码和一些屏幕截图。请帮忙。
注意:$scope.tasksRunDataChartObject;具有来自服务器的json数据，格式为浮点图
滑块截图和代码
<rzslider rz-slider-floor="reportTasksRunRange.floor"
rz-slider-ceil="reportTasksRunRange.ceil"
rz-slider-model="reportTasksRunRange.min"
rz-slider-high="reportTasksRunRange.max"
rz-slider-translate="translate" rz-slider-step="{{reportTasksRunRange.step}}"></rzslider>
<flot dataset="tasksRunData" options="tasksRunChartOptions" class="center-block" width="100%" height="400px" ></flot>
$scope.reportTasksRunRange = {
min: 1412380800000,
max: 1412812800000,
floor: 1412380800000,
ceil: 1412812800000,
step: 1412467200000-1412380800000
};
$scope.translate = function(value) {
var monthNames = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ];
var myDate = new Date( value );
return myDate.getDate() + " " + monthNames[myDate.getMonth()] + " '"+myDate.getFullYear();
}
$scope.$on('slideEnded', function () {
console.log("slideEnded Event Fired : " +$scope.translate($scope.reportTasksRunRange.min)+" - "+$scope.translate($scope.reportTasksRunRange.max));
$scope.redrawTasksRunDataHistoByChart($scope.translate($scope.reportTasksRunRange.min), $scope.translate($scope.reportTasksRunRange.max));
});
$scope.redrawTasksRunDataHistoByChart = function(min, max) {
var mainArray = $scope.tasksRunDataChartObject;
console.log("mainArray");
console.log(mainArray);
/*var dataArray = mainArray[0]["data"];
dataArray.splice(2,1);
mainArray[0]["data"] = dataArray;
mainArray[0]["data"] = mainArray[0]["data"].splice(2,1);
$scope.tasksRunData = mainArray;
console.log(mainArray);*/
}
来自服务器的Json数据
{
"date_histo_agg_by_type": {
"took": 332,
"timed_out": false,
"_shards": {
"total": 5,
"successful": 5,
"failed": 0
},
"hits": {
"total": 14868,
"max_score": 0.0,
"hits": []
},
"aggregations": {
"task_type": {
"buckets": [{
"key": "DSS",
"doc_count": 14868,
"run_over_time": {
"buckets": [{
"key_as_string": "2014-10-04T00:00:00.000Z",
"key": 1412380800000,
"doc_count": 477
},
{
"key_as_string": "2014-10-05T00:00:00.000Z",
"key": 1412467200000,
"doc_count": 3015
},
{
"key_as_string": "2014-10-06T00:00:00.000Z",
"key": 1412553600000,
"doc_count": 2988
},
{
"key_as_string": "2014-10-07T00:00:00.000Z",
"key": 1412640000000,
"doc_count": 3123
},
{
"key_as_string": "2014-10-08T00:00:00.000Z",
"key": 1412726400000,
"doc_count": 2970
},
{
"key_as_string": "2014-10-09T00:00:00.000Z",
"key": 1412812800000,
"doc_count": 2295
}]
}
}
}
}
}
}
Chrome调试屏幕截图
更新
ReportService.getTasksRunDateHistoByType().then(function(result) {
$scope.renderTasksRunDateHistoByType(result);
});
$scope.renderTasksRunDateHistoByType = function(json) {
var buckets = json[RUN_AGG_BY_DATE_HISTO].aggregations[TASK_TYPE_AGG].buckets;
var log = [];
var mainArray = [];
var colorCodes = ["#7BC253","#9C77D7","#399CEA","#FF6244","#FF7FB5","#00D3AB","#FFCC4C","#193441","#193441","#BEEB9F","#E3DB9A","#917A56"],
idx = 0;
angular.forEach(buckets, function(value, key) {
this.push(key + ': ' + value +", "+value["key"]);
var dataArray = [], index = 0;
angular.forEach(value[RUN_OVER_TIME_KEY]["buckets"], function(value, key) {
var dataArr = [];
dataArr.push('['+value["key"]+', '+value["doc_count"]+']');
dataArray.push(dataArr);
index++;
}, log);
var barObject = '"bars": {"show": "true", "barWidth":'+23*60*60*1000+', "fillColor": "'+colorCodes[idx]+'", "order": 1, "align": "center"}';
var object = '{ "data": ['+dataArray+'], "label": "'+value["key"]+'", '+barObject+'}';
mainArray.push(JSON.parse(object));
idx++;
}, log);
$scope.tasksRunData = mainArray;
$scope.tasksRunChartOptions = {
legend: {
show: true,
margin: 2
},
xaxis: {
mode: "time", timeformat: "%m/%d/%y", minTickSize: [1, "day"]
},
grid: {
labelMargin: 10,
hoverable: true,
borderWidth: 0
},
series: {
stack: true
},
colors: colorCodes,
tooltip: true
};
return mainArray;
}
AngularJS服务
angular.module('myApp')
.service('ReportService', function ReportService($http, $q) {
var getTasksRunDateHistoByType = function() {
var deferred = $q.defer();
$http({
method: 'POST',
url: "http://localhost:4040/reports/taskRun",
data: '{ "client_user_info": { "client_id": "MU03"}}'
}).
success(function(result, status, headers, config) {
deferred.resolve(result);
}).
error(function(result, status, headers, config) {
console.log("Error");
});
return deferred.promise;
};
return {
getTasksRunDateHistoByType: getTasksRunDateHistoByType
};
});
浮点图
最佳答案
从您的问题来看，您似乎正在对slideEnded事件进行AJAX调用并交换出图表上的数据。这可以工作，但是速度很慢，并且无法提供最佳的用户体验。相反，我将使用所有数据绘制整个图表。然后，当用户滑动并重绘时，我将调整图表的最小/最大。这样，您只需加载一个AJAX即可填充所有数据，并且图表会快速更新。
但，我们有问题。您正在使用的angular指令仅监视一件事以触发适当的流程重绘-绘图的数据集。但是，如果它还可以监视您的$scope.reportTasksRunRange.min和$scope.reportTasksRunRange.max并更改后触发重绘，那岂不是很棒吗？这确实是angularjs数据绑定(bind)的核心!
因此，让我们“修复”指令。您需要做的首先是，更改范围:
scope: {
dataset: '=',
min: '=',
max: '=',
options: '=',
callback: '='
},
并添加几个
$watch: onMinChanged = function(min) {
if (plot) {
plot.getOptions().xaxes[0].min = min;
plot.setupGrid();
return plot.draw();
}
};
onMaxChanged = function(min) {
if (plot) {
plot.getOptions().xaxes[0].max = max;
plot.setupGrid();
return plot.draw();
}
};
scope.$watch('min', onMinChanged, true);
scope.$watch('max', onMaxChanged, true);
这是我的example放在一起。
Angularjs的力量...
关于angularjs - 根据范围选择更改浮点图数据数组的最佳方法是什么？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27034462/