Highchart 日期选择器 [英] Highchart datepicker
问题描述
我正在尝试让 jquery-ui datepicker 与 highcharts 一起使用，以便用户可以选择一个日期，例如
用户选择 10 月 10 日至 10 月 25 日
一旦用户选择了日期，highchart 应重新绘制并显示与任务一起完成的项目的小时数.我的图表如下所示:
从目前的照片来看，highchart 显示了用户针对Asda"项目完成的任务所花费的时间.
目前我的图表只显示当前一周的小时数.我想要做的是使用 jquery 日期选择器，以便它可以显示用户输入的过去几个小时.如果用户选择从 10 月 10 日"到10 月 25 日"，图表应重新绘制并显示所选日期范围的小时数和项目.
我的代码如下:
Index.html.erb
<%= javascript_include_tag 'highcharts', 'exporting' %><%= 渲染 'projectselect' %><div 类 = '正确'><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"/><button id="button">重绘</button><div id="container" style="height: 400px"></div><脚本>$(document).ready(function() {var chart = new Highcharts.Chart(options);});onchange: $(function() {var 日期 = $( "#from, #to" ).datepicker({默认日期:+1w"，changeMonth: 真,月数:1，onSelect: 函数( selectedDate ) {var option = this.id == "from" ?"minDate" : "maxDate",instance = $( this ).data( "datepicker" ),日期 = $.datepicker.parseDate(instance.settings.dateFormat ||$.datepicker._defaults.dateFormat,selectedDate, instance.settings );日期.not( this ).datepicker( "option", option, date );}});});$('#button').click(function() {图表重绘()；});变量选项 = {图表: {renderTo: '容器',defaultSeriesType: '列'},标题: {文本:'<%= current_user.username %>',},副标题:{文本:'项目时间'},x轴:{类别: ['预售','项目'，'故障修复','支持'，'非工作时间'，'生病的'，'辛劳'，'离开']},y轴:{分钟:0，标题: {文字:'小时'}},绘图选项:{系列: {堆叠:'正常'}},ip: {格式化程序:函数(){返回 ''+this.x +': '+ this.y +' 小时';}},学分:{文本: ''，href: ''},出口:{启用:真，文件名:'项目时间'},绘图选项:{柱子: {点填充:0.3，边框宽度:0}},系列: [<% @users_projects.each 做 |users_project|％＞<% 如果 !users_project.user.nil?&¤t_user.full_name == users_project.user.full_name %><% @data.each 做 |data|％＞<% if data[:values] == [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0] %><%其他%><% if data[:name] == users_project.project.project_name %>{name: '<%= data[:name] %>',数据: [<% data[ :values ].each do |value|％＞<%=值%>，<%结束%>]},<%结束%><%结束%><%结束%><%其他%><%结束%><%结束%>]};
解决这个问题的最佳方法是什么?
在日期选择器的 onSelect 回调中，你应该验证，如果 #from 和 #to 被选中(如果没有，则提供合理的默认值)，最后向服务器发出请求和 xhr 请求以获取新的数据系列.
onSelect: function( selectedDate ) {var option = this.id == "from" ?"minDate" : "maxDate",instance = $( this ).data( "datepicker" ),日期 = $.datepicker.parseDate(instance.settings.dateFormat ||$.datepicker._defaults.dateFormat,选定日期，实例设置);日期.not( this ).datepicker( "option", option, date );//验证我们是否有两个日期并从服务器获取新系列if ($(dates[0]).datepicker("getDate") &&$(dates[1]).datepicker("getDate")) {$.ajax({类型:'POST'，url: '<%= user_projects_path(params[:user_id]) %>',数据:{"from": $(dates[0]).datepicker("getDate"), "to": $(dates[1]).datepicker("getDate") },成功:功能(数据){//现在我们有新的数据系列要显示在图表中//我们删除旧的，添加新的并重新绘制图表for(var i=0; iuser_projects_path url 下的Controller 方法当然需要存在并返回给定user_id 的JSON 格式的系列数据.您可以在使用 jquery xhr 请求(from 和 to)发送的参数返回之前过滤您的系列数据.
快速而肮脏的解决方案，但我希望你明白...
I am trying to get jquery-ui datepicker to work with highcharts so that a user can select a date an example being
A user selects 10th October to 25th October
Once the user has selected the dates the highchart should redraw and show the hours for the projects that have done along with the tasks. My chart looks like the following:
From the photo currently the highchart shows the hours a user has done for a task against the project "Asda".
At the moment I have the chart simply displays the hours for the current week. What I am trying to do is use the jquery datepicker so that it can display past hours that the user has entered. If the user selects "from 10th October" "to "25th October" the chart should redraw and show the hours and projects for the selected date range.
My code follows:
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>
What would be the best way to approach this?
In onSelect callback of datepickers, you should validate, if both #from and #to are selected (or provide sensible defaults if not) and at the end fire and xhr request to server to get new series of data.
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
}
});
}
}
Controller method under user_projects_path url needs to exists and return JSON formatted series data for given user_id of course. You can filter your series data before returning with params sent by jquery xhr request (from and to).
Quick and dirty solution but I hope you got the point...
这篇关于Highchart 日期选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
