繁体   English   中英

Highcharts列范围日期图表

[英]Highcharts columnrange date chart

我的目标是制作一个跟踪用户活动的图表。 我希望它在首次登录时以及上次登录时进行绘图。

我传入此函数的数据( 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对应于不可接受的数据类型,这证实了我的怀疑。

控制台结果

有什么建议么?

更新:我包括highcharts-more.js,现在摆脱了上面提到的错误。 日期范围仍有点偏差。 下面是现在正在发生的事情的图像。

当前图表情况

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM