我的目标是制作一个跟踪用户活动的图表。我希望它能绘制出他们首次登录时以及上次登录时的时间。
我传递给此函数(var refarray = [...data here...]
)的数据为字符串格式,这意味着我需要将数据库中给我的日期解析为日期格式,或者我想。在下面,您将看到我的尝试。
function hc_first_last_logon(selector, refarray){
var categories = [];
var Dat = [];
for(var i = 0; i<refarray.length; i++){ // store all user names and data
categories.push(refarray.name)
Dat.push([Date.parse(refarray.FirstLogon), Date.parse(refarray.LastLogon)])
}
//console.log(Dat) returns date time objects as expected
var def = {
chart: { type: 'columnrange', inverted: true },
legend: { enabled: false},
title:{ text: "First and Last Log-on"},
xAxis:{ categories: categories, title:{text: "User"}},
yAxis:{ type: 'datetime' },
series:[{name: "First and Last Log-on", data: Dat}]
};
var div = $('#' + selector);
console.log(div);
div.highcharts(def);
return def;}
我的意图是使此图表具有通用性,允许我选择任意数量的不同用户,并在我单击html页面上的刷新按钮时获得该图表(它查询数据库并将数据发送到此函数)。
我怀疑我的问题与日期变量
Dat
有关,因为看来字符串和日期变量类型不是高图表的可接受数据输入。这是我在返回的代码中遇到的错误的随附屏幕截图。 10x2矩阵几乎相同,因此我只包含一行。错误#17对应于不可接受的数据类型,这证实了我的怀疑。
Console Results
有什么建议?
更新:我包括highcharts-more.js,现在摆脱了上面提到的错误。日期范围仍然有些偏离。下面是当前情况的图像。
Current Chart Situation
最佳答案
感谢@GrzegorzBlachliński和他的建议,我得以找到问题并解决了。这是出问题的地方:
1)我没有加载highcharts-more.js,其中包括解决了Highcharts错误17。
2)日期必须从1970年1月1日起以毫秒为单位。轻松修复将生成的日期放入(datevar).getTime()中。
3)我没有工具提示格式化程序。我从互联网上复制了一份文件,就可以完成工作,并且行得通!
这是那些有兴趣的代码:
function hc_first_last_logon(selector, refarray){
var categories = [];
var Dat = [];
for(var i = 0; i<refarray.length; i++){ // store all user names and data
categories.push(refarray.name)
Dat.push([Date.parse(refarray.FirstLogon).getTime(), Date.parse(refarray.LastLogon)].getTime())
}
//console.log(Dat) returns date time objects as expected
var def = {
chart: { type: 'columnrange', inverted: true },
legend: { enabled: false},
title:{ text: "First and Last Log-on"},
xAxis:{ categories: categories, title:{text: "User"}},
yAxis:{ type: 'datetime' },
tooltip: {
formatter: function() {
return new Date(this.point.low).toUTCString().substring(0, 22) + ' - ' + new Date(this.point.high).toUTCString().substring(0, 22)
}
},
series:[{name: "First and Last Log-on", data: Dat}]
};
var div = $('#' + selector);
console.log(div);
div.highcharts(def);
return def;}