Highcharts 列范围日期图表答案

【问题标题】：Highcharts columnrange date chartHighcharts 列范围日期图表
【发布时间】：2016-07-11 22:41:35
【问题描述】：

我的目标是制作一个跟踪用户活动的图表。我希望它绘制他们第一次登录的时间，以及他们最后一次登录的时间。

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

Console Results

有什么建议吗？

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

Current Chart Situation

【问题讨论】：

你能举一个你得到的输出例子吗？您的 Dat 对象的外观如何？
谢谢，我在我的问题中包含了控制台结果的屏幕截图。
错误 17 与您的系列类型错误有关 - Highcharts 无法识别。这是因为如果你想使用你的系列的 columnrange 类型，你需要添加 highcharts-more.js 模块。您可以在此处阅读有关此错误的信息：highcharts.com/errors/17
好的，所以我在代码中添加了 highcharts-more.js，但它似乎仍然对我输入图表的内容很挑剔，但这是向前迈出的一步。我将在上面附上结果和控制台结果的图片。作为一个附带问题，为了获得一些更具体的图表，我需要 highcharts-more.js 还是所有图表都包含在 highcharts.js 中？我的印象是他们的大部分图表功能（包括列范围）已经在 highcharts.js 中进行了说明
如果您有轴的日期时间，Highcharts 预计您的日期格式为自 1970 年 1 月 1 日以来的毫秒格式。您可以使用 Date.getTime() 简单地转换此字符串：w3schools.com/jsref/jsref_gettime.asp跨度>

标签： javascript charts highcharts

【解决方案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;}

【讨论】：