如何在使用angularjs滑块rzajac得到顺利范围踏步？

问题描述：

这个问题是在延续我的$p$pvious问题这是由马克回答

This question is in continuation to my previous question which was answered by Mark

我使用 rzajac滑块来控制我的图表。滑块值是日期，以毫秒为单位，但是当我向前移动滑块步骤两次，一天 86400000 （有步长值的步长值减去2日期毫秒值（1412467200000-1412380800000））。另外，图表作物上的边条当图表值的变化。

I am using rzajac slider to control my chart. The slider values are date, given in milliseconds, but when I move forward the slider steps twice and for step value of a day 86400000 (got step value by subtracting 2 date millisecond values (1412467200000-1412380800000)). Also the chart crops the bar on it's edges when the chart value changes.

谁能帮我下面的问题？

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例如

下面是我的code

<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);
}

更新

更新plunker链接还提供数据以每小时改变滤波器根据小时一天。

Updated plunker link also providing data with hourly changes to filter based on hours for a day.

答

您已经有了一对夫妇在这里的问题：

You've got a couple problems here:

1）海军报在UTC策划，你的滑块在当地时间。我UTC -5，这产生的日期之间的脱节。

1.) flot is plotting in UTC, your slider is in local time. I'm UTC -5 and this produces a disconnect between the dates.

2）滑块的每个日期的双跳时谈到这里一>。不幸的是，这是一个滑块的功能，修复它需要修改源。

2.) The double jump of the slider for each date is talked about here. Unfortunately, it's a "feature" of the slider and fixing it requires modifying the source.

3）。你的半壁*栏不奇怪，因为它设置最小/最大的一天的开始和酒吧在一天内跨越。为了解决这个问题，我会在指令引入酒吧最小/最大填充值：

3.) Your "half" bar is not surprising, since it sets the min/max to the start of the day and the bar spans across the day. To fix that, I'd introduce a bar min/max padding value in the directive:

 // 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();
    }
 };

下面是一个更新例如把这个放在一起。

Here's an updated example putting this all together.

如何在使用angularjs滑块rzajac得到顺利范围踏步？

相关推荐