Highchart 日期选择器

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

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

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

Chart https://i.stack.imgur.com/4VmxZ.png

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

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

我的代码如下：

索引.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>

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

In onSelect日期选择器的回调，您应该验证，如果两者#from and #to被选择（或者如果没有则提供合理的默认值），最后向服务器发送 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_pathurl 需要存在并返回给定的 JSON 格式的系列数据user_id当然。您可以在使用 jquery xhr 请求发送的参数返回之前过滤系列数据（from and to).

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