这个问题是previous question
回答的Mark的延续问题我正在使用rzajac slider来控制我的图表。滑块值是日期,以毫秒为单位,但是当我向前移动滑块时,步长两次,步长值为86400000
(通过减去2个日期毫秒值(1412467200000-1412380800000)
得到步长值)。当图表值发生变化时,图表也会在其边缘裁剪条形。
有人可以帮我解决以下问题吗?
1. Is it correct way to step a day? how can I provision it for hours?
2. How to show whole bar, without cropping when applying a filter on button click or slider change?
3. Need help with smooth transition for changing date range with rzajac slider plugin
以下是我的代码
<div ng-controller="MainCtrl">
<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" min="reportTasksRunRange.min" max="reportTasksRunRange.max"></flot>
<br/>
<br/>
<div>{{reportTasksRunRange.min}} is "{{translate(reportTasksRunRange.min)}}"</div>
<div>Stepping {{reportTasksRunRange.step}}</div>
<h2>Filter date range</h2>
<button type="button" class="btn btn-default btn-xs" ng-click="applyFilterClick($event)">Apply Filter</button>
</div>
var colorCodes = ["#8CC051", "#967BDC", "#5D9CEC", "#FB6E52", "#EC87BF", "#46CEAD", "#FFCE55", "#193441", "#193441", "#BEEB9F", "#E3DB9A", "#917A56"];
$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
};
$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.toLocaleString();
return myDate.getDate() + " " + monthNames[myDate.getMonth()] + " " + myDate.getFullYear();
}
$scope.reportTasksRunRange = {
min: 1412380800000,
max: 1412812800000,
floor: 1412380800000,
ceil: 1412812800000,
step: (1412467200000 - 1412380800000)
};
$scope.tasksRunData = [{"data":[[1412380800000,477],[1412467200000,3015],[1412553600000,2988],[1412640000000,3123],[1412726400000,2970],[1412812800000,2295]],"label":"DSS","bars":{"show":"true","barWidth":54000000,"fillColor":"#8CC051","order":1,"align":"center"}}];
$scope.applyFilterClick = function($event) {
$scope.reportTasksRunRange.min = 1412380800000;
$scope.reportTasksRunRange.max = 1412640000000;
//$scope.reportTasksRunRange.max = $scope.reportTasksRunRange - (1412467200000 - 1412380800000);
}
更新
Updated plunker link还根据每天的小时数提供每小时更改数据。
答案 0 :(得分:2)
你在这里遇到了几个问题:
1。)flot
以UTC格式绘制,滑块位于当地时间。我是UTC -5,这会在日期之间产生脱节。
2。)每个日期的滑块双跳都是here。不幸的是,它是滑块的“功能”,修复它需要修改源。
3。)你的“半”栏并不奇怪,因为它将最小值/最大值设置为当天的开始,并且栏杆跨越一天。为了解决这个问题,我将在指令中引入bar min / max填充值:
// I created and set options.xaxis.minMaxPad to 12 hours (43200000) in the flot config object
scope.$watch('dataset', onDatasetChanged, true);
onMinChanged = function(min, _, scope) {
if (plot) {
plot.getOptions().xaxes[0].min = min - scope.options.xaxis.minMaxPad;
plot.setupGrid();
return plot.draw();
}
};
这是一个updated example将这一切放在一起。