Highchart datepicker

我试图让jquery-ui datepicker与highcharts一起使用，以便用户可以选择一个例子的日期

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

一旦用户选择了日历，高亮图应该重绘，并显示已完成任务的项目的小时数。 我的图表如下所示：

图表

从目前的照片中，高图显示了用户针对“Asda”项目执行任务所花费的时间。

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

我的代码如下：

Index.html.erb

  
 From  to  
 Redraw 
  $(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: '', }, 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: [       { name: '', data: [  ,  ] },       ] };  

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

Answer 1

在onSelect对#from回调中，如果选择了#from和#to （或者如果没有提供合理的默认值），则应该validation，并在结束时向服务器发送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 

user_projects_path url下的控制器方法需要存在，并返回给定user_id的JSON格式系列数据。 您可以在返回由jquery xhr请求发送的params（ from和to ）之前过滤系列数据。

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