Javascript 在用户指定的日期范围后更新JSON对象
我正在尝试根据用户选择的日期范围动态更新一系列图表。我使用morris.js创建图表,这些图表是通过JSON文件提供的数据。我想做的是首先在图表上显示过去7天的数据,然后如果用户更改日期范围,我希望图表根据用户请求刷新 以下是我的图表元素:Javascript 在用户指定的日期范围后更新JSON对象,javascript,jquery,ajax,morris.js,bootstrap-datepicker,Javascript,Jquery,Ajax,Morris.js,Bootstrap Datepicker,我正在尝试根据用户选择的日期范围动态更新一系列图表。我使用morris.js创建图表,这些图表是通过JSON文件提供的数据。我想做的是首先在图表上显示过去7天的数据,然后如果用户更改日期范围,我希望图表根据用户请求刷新 以下是我的图表元素: <div id="morrisline" style="height: 250px;"></div> 下面是JSON“bar”元素的一个示例——我认为我目前格式化日期的格式并不理想。我愿意接受建议,因为我有权更改格式: {
<div id="morrisline" style="height: 250px;"></div>
下面是JSON“bar”元素的一个示例——我认为我目前格式化日期的格式并不理想。我愿意接受建议,因为我有权更改格式:
{
"bar1": {
"x": "1/1/2014",
"a": "9",
"b": "6"
},
"bar2": {
"x": "1/2/2014",
"a": "5",
"b": "7"
},
"bar3": {
"x": "1/3/2014",
"a": "8",
"b": "9"
},
"bar4": {
"x": "1/4/2014",
"a": "7",
"b": "9"
}
}
这是daterange回调——我不确定一旦启动回调,如何准确地更新图表的数据元素
$(document).ready(function() {var cb = function(start, end) {
$('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
编辑:下面是获取JSON数据的调用:
(function ($, window, undefined) {
"use strict";
$(document).ready(function ($) {
$.getJSON( "js/data.json", function( json ) {
//console.log(Object.keys(json.line).map(function(key) {return json.line[key]}));
if (typeof Morris != 'undefined') {
//Bar chart
Morris.Bar({
element: 'barchart',
axes: true,
data: Object.keys(json.bar).map(function(key) {return json.bar[key]}),
resize: true,
xkey: 'x',
ykeys: ['a', 'b']
});
}
});
});
})(jQuery, window);
这是jQueryUIDatePicker的良好实践。您可以从date picker变量查询数据,只需在date picker函数中运行一个函数(ajax调用)。它将是无缝的,可能比你现在拥有的更轻。我不得不为我在这方面的知识不足道歉。你认为你能提供一个这样的例子吗?你是使用ajax来获取json,还是有json变量?别难过,json并不是度量构建测试平台的优势
(function ($, window, undefined) {
"use strict";
$(document).ready(function ($) {
$.getJSON( "js/data.json", function( json ) {
//console.log(Object.keys(json.line).map(function(key) {return json.line[key]}));
if (typeof Morris != 'undefined') {
//Bar chart
Morris.Bar({
element: 'barchart',
axes: true,
data: Object.keys(json.bar).map(function(key) {return json.bar[key]}),
resize: true,
xkey: 'x',
ykeys: ['a', 'b']
});
}
});
});
})(jQuery, window);