如何在angularjs中使用rzajac滑块获得平滑范围步进?

时间:2014-11-26 07:49:15

标签: angularjs slider flot

这个问题是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

这是plunker example

以下是我的代码

<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还根据每天的小时数提供每小时更改数据。

1 个答案:

答案 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将这一切放在一起。