Javascript Highchart和json数据

Javascript Highchart和json数据,javascript,jquery,json,database,highcharts,Javascript,Jquery,Json,Database,Highcharts,我的JSON看起来像这样,我想制作一个Highchart,显示每个小时的注册数量。因此,我的X轴将是同一天和同一小时的时间戳数 [{"data":"2016-04-11 20:18:41"},{"data":"2016-04-11 20:18:41"},{"data":"2016-04-11 12:18:40"},{"data":"2016-04-11 13:18:40"},{"data":"2016-04-11 13:18:34"},{"data":"2016-04-11 14:18:34"}

我的JSON看起来像这样,我想制作一个Highchart,显示每个小时的注册数量。因此,我的X轴将是同一天和同一小时的时间戳数

[{"data":"2016-04-11 20:18:41"},{"data":"2016-04-11 20:18:41"},{"data":"2016-04-11 12:18:40"},{"data":"2016-04-11 13:18:40"},{"data":"2016-04-11 13:18:34"},{"data":"2016-04-11 14:18:34"},{"data":"2016-04-11 15:18:34"},{"data":"2016-04-11 15:18:30"},{"data":"2016-04-11 19:18:29"},{"data":"2016-04-11 19:18:29"},{"data":"2016-04-11 20:18:18"},{"data":"2016-04-11 21:18:12"},{"data":"2016-04-11 22:18:09"},{"data":"2016-04-11 23:18:08"}];
我被卡住了。JSON的格式似乎有误

$(函数(){
$.getJSON('json/json.php',函数(数据){
//控制台日志(数据);
//创建图表
$(“#容器”).highcharts('StockChart'{
范围选择器:{
选定:1
},
xAxis:{
键入:“日期时间”
},
标题:{
文本:“测试”
},
系列:[{
名称:'注册',
数据:数据,
阈值:0
}]
});
});
});

编辑 我设法使我的数据如下所示:

[{"TS":"2016-04-12 00:00:05","COUNT":"187"},{"TS":"2016-04-12 01:00:30","COUNT":"75"},{"TS":"2016-04-12 02:00:56","COUNT":"32"},

如何在图表中将其设置为X和Y值?

您可以将JSON对象数组转换为嵌套数组。第一个索引是时间戳,第二个是计数

var数据=[{TS:“2016-04-12 00:00:05”,“计数”:“187”},{“TS:“2016-04-12 01:00:30”,“计数”:“75”},{“TS:“2016-04-12 02:00:56”,“计数”:“32”});
//用于将AJAX加载的数据转换为股票数据。
函数processData(数据、xField、yField){
返回数据映射(函数(obj){
返回[newdate(obj[xField]).getTime(),parseInt(obj[yField],10)];
});
}
$(函数(){
//$.getJSON('json/json.php',函数(数据){//我们现在将忽略AJAX调用。
data=processData(数据'TS','COUNT');//处理数据。
$(“#容器”).highcharts('StockChart'{
范围选择器:{
选定:1
},
标题:{
文本:“按日期注册计数”
},
xAxis:{
标题:{
文本:“注册日期”
}
},
亚克斯:{
标题:{
文本:“计数”
}
},
系列:[{
名称:'注册',
数据:数据,
工具提示:{
数值小数:2
}
}]
});
//});
});

您可以将JSON对象数组转换为嵌套数组。第一个索引是时间戳,第二个是计数

var数据=[{TS:“2016-04-12 00:00:05”,“计数”:“187”},{“TS:“2016-04-12 01:00:30”,“计数”:“75”},{“TS:“2016-04-12 02:00:56”,“计数”:“32”});
//用于将AJAX加载的数据转换为股票数据。
函数processData(数据、xField、yField){
返回数据映射(函数(obj){
返回[newdate(obj[xField]).getTime(),parseInt(obj[yField],10)];
});
}
$(函数(){
//$.getJSON('json/json.php',函数(数据){//我们现在将忽略AJAX调用。
data=processData(数据'TS','COUNT');//处理数据。
$(“#容器”).highcharts('StockChart'{
范围选择器:{
选定:1
},
标题:{
文本:“按日期注册计数”
},
xAxis:{
标题:{
文本:“注册日期”
}
},
亚克斯:{
标题:{
文本:“计数”
}
},
系列:[{
名称:'注册',
数据:数据,
工具提示:{
数值小数:2
}
}]
});
//});
});

您使用的是Highstock,因此您的数据应该以Timeseries(时间,值)的形式给出

让我们以你为例:

yourData = [{"TS":"2016-04-12 00:00:05","COUNT":"187"},{"TS":"2016-04-12 01:00:30","COUNT":"75"},{"TS":"2016-04-12 02:00:56","COUNT":"32"}....]
应该是这样的:

[[time1.TS, value1.COUNT], [time2.TS, value2.TS], [time3.TS, value3.COUNT]] // pay attention it's an array of arrays.
此简单函数应能够根据需要格式化数据:

var formattedData = [];
for(var i = 0; i < yourData.length; i++){
    formattedData.push([ new Date(yourData[i].TS).getTime(), parseInt(yourData[i].COUNT)]);
        }
var formattedData=[];
对于(var i=0;i
我做了一个测试,所以你可以看到它在工作


希望我已经帮助您使用Highstock,所以您的数据应该以Timeseries(时间、值)的形式提供

让我们以你为例:

yourData = [{"TS":"2016-04-12 00:00:05","COUNT":"187"},{"TS":"2016-04-12 01:00:30","COUNT":"75"},{"TS":"2016-04-12 02:00:56","COUNT":"32"}....]
应该是这样的:

[[time1.TS, value1.COUNT], [time2.TS, value2.TS], [time3.TS, value3.COUNT]] // pay attention it's an array of arrays.
此简单函数应能够根据需要格式化数据:

var formattedData = [];
for(var i = 0; i < yourData.length; i++){
    formattedData.push([ new Date(yourData[i].TS).getTime(), parseInt(yourData[i].COUNT)]);
        }
var formattedData=[];
对于(var i=0;i
我做了一个测试,所以你可以看到它在工作


希望我帮了你

是的。格式不正确。查看文档以了解正确的格式我只是不明白我的图表没有显示任何内容,而且我没有收到任何错误。我没有显示任何值,因为您没有提供任何值。您有一个日期列表,没有相应的数据值-图表没有显示任何内容,但也没有显示任何错误。如果要显示每个日期出现的次数,必须处理数据并确定。然后将数据以正确的格式发送到图表。所以我需要这样的东西?[{“2016-04-11 20:00:00”,“8”},{“2016-04-11 21:00:00”,“11”}],时间戳和值数据格式不正确。为了让highcharts理解日期时间格式,您需要在将日期对象传递给highcharts或将其转换为时间戳(历元毫秒)之前创建日期对象。此外,highcharts不理解“TS”和“COUNT”键,请使用x和y。格式不正确。查看文档以了解正确的格式我只是不明白我的图表没有显示任何内容,而且我没有收到任何错误。我没有显示任何值,因为您没有提供任何值。您有一个日期列表,没有相应的数据值-图表没有显示任何内容,但也没有显示任何错误。如果要显示每个日期出现的次数,必须处理数据并确定。然后将数据以正确的格式发送到图表。所以我需要这样的东西?[{“2016-04-11 20:00:00”,“8”},{“2016-04-11 21:00:00”,“11”}],时间戳和值数据格式不正确。为了让highcharts理解日期时间格式,您需要在将日期对象传递给highcharts或将其转换为时间戳(历元毫秒)之前创建日期对象。此外,highcharts不理解