javascript - Highcharts 列范围日期图表

Question

我的目标是制作一个跟踪用户事件的图表。我希望它能够绘制他们第一次登录的时间和最后一次登录的时间。

我传递到此函数的数据 (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 有关，因为字符串和日期变量类型似乎不是 highcharts 可接受的数据输入。

这是我在返回的代码中遇到的错误的屏幕截图。 10x2 矩阵几乎完全相同，因此我只包含一行。错误#17对应的是 Not Acceptable 数据类型，这证实了我的怀疑。

Console Results

有什么建议吗？

更新:我包含了 highcharts-more.js，现在消除了上面提到的错误。日期范围仍然有点偏离。下面是现在正在发生的情况的图片。

Current Chart Situation

Answer 1

感谢@Grzegorz Blachliń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;}