javascript - Highchart 日期选择器

Question

我正在尝试让 jquery-ui datepicker 与 highcharts 一起使用，以便用户可以选择一个日期，例如

用户选择 10 月 10 日至 10 月 25 日

用户选择日期后，高图应重新绘制并显示已完成项目的小时数以及任务。我的图表如下所示:

Chart

从目前的照片来看，高图显示了用户针对“Asda”项目完成任务的小时数。

目前，我的图表仅显示本周的小时数。我想做的是使用 jquery datepicker，以便它可以显示用户输入的过去几个小时。如果用户选择“从 10 月 10 日”到“10 月 25 日”，图表应重新绘制并显示所选日期范围内的时间和项目。

我的代码如下:

Index.html.erb

<%= javascript_include_tag 'highcharts', 'exporting' %>

<%= render 'projectselect' %>

<div class = 'right'>
<label for="from">From</label>
<input type="text" id="from" name="from" size="15"/>
<label for="to">to</label>
<input type="text" id="to" name="to" size="15"/>
</div>

<button id="button">Redraw</button>


<div id="container" style="height: 400px"></div>

<script>
$(document).ready(function() {var chart = new Highcharts.Chart(options);});
onchange: $(function() {
        var dates = $( "#from, #to" ).datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 1,
            onSelect: function( selectedDate ) {
                var option = this.id == "from" ? "minDate" : "maxDate",
                    instance = $( this ).data( "datepicker" ),
                    date = $.datepicker.parseDate(
                        instance.settings.dateFormat ||
                        $.datepicker._defaults.dateFormat,
                        selectedDate, instance.settings );
                dates.not( this ).datepicker( "option", option, date );
            }
        });
    });

$('#button').click(function() {
    chart.redraw();
});

var options = {
    chart: {
         renderTo: 'container',
         defaultSeriesType: 'column'
      },
      title: {
          text: '<%= current_user.username %>',
      },
      subtitle: {
         text: 'Project Hours'
      },
      xAxis: {
         categories: [
            'Pre-Sales',
            'Project',
            'Fault Fixing',
            'Support',
            'Out Of Hours',
            'Sick',
            'Toil',
            'Leave'  
         ]
      },
      yAxis: {
         min: 0,
         title: {
            text: 'Hours'
         }
      },
        plotOptions: {
         series: {
            stacking: 'normal'

         }
      },ip: {
         formatter: function() {
            return ''+
               this.x +': '+ this.y +' Hours';
         }
      },

      credits: {
         text: '',
         href: ''
      },

      exporting: {
         enabled: true,
         filename: 'Project-Hours'
      },

      plotOptions: {
         column: {
            pointPadding: 0.3,
            borderWidth: 0
         }
      },

      series: [
      <% @users_projects.each do |users_project| %>
                <% if !users_project.user.nil? && current_user.full_name == users_project.user.full_name %>
                  <% @data.each do |data| %>
            <% if data[ :values ] == [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0] %>
            <% else %>
              <% if data[ :name ] == users_project.project.project_name %>
              {
                name: '<%= data[ :name ] %>',
                data: [
                <% data[ :values ].each do |value| %>
                 <%= value %>,
                <% end %>
                ]
              },
              <% end %>
          <% end %>
                <% end %>
      <% else %>
      <% end %>
            <% end %>
      ]
};
</script>

解决这个问题的最佳方法是什么？

Answer 1

在日期选择器的 onSelect 回调中，您应该验证是否同时选择了 #from 和 #to(如果没有，则提供合理的默认值)最后，fire 和 xhr 请求服务器获取新的一系列数据。

onSelect: function( selectedDate ) {
  var option = this.id == "from" ? "minDate" : "maxDate",
  instance = $( this ).data( "datepicker" ),
    date = $.datepicker.parseDate(
      instance.settings.dateFormat || $.datepicker._defaults.dateFormat,
      selectedDate,
      instance.settings
    );
    dates.not( this ).datepicker( "option", option, date );

    // validate if we have both dates and get new series from server
    if ($(dates[0]).datepicker("getDate") &&
        $(dates[1]).datepicker("getDate")) {
      $.ajax({
        type: 'POST',
        url: '<%= user_projects_path(params[:user_id]) %>',
        data: {"from": $(dates[0]).datepicker("getDate"), "to" : $(dates[1]).datepicker("getDate") },
        success: function(data) {
          // now we have new series of data to display in graph
          // we remove the old one, add the new and redraw the chart
          for(var i=0; i<chart.series.length; i++) {
            chart.get(chart.series[i].options.id).remove();
          }

          // fiddle with json data from xhr response to form valid series
          var series = data; 
          chart.addSeries(series, true); // second param says we want to redraw chart
        }
      });
    }
}

user_projects_path url 下的 Controller 方法需要存在，并返回给定 user_id 的 JSON 格式的系列数据。您可以在使用 jquery xhr 请求(from 和 to)发送的参数返回之前过滤系列数据。

快速而肮脏的解决方案，但我希望你明白了......