用高级图表解析HTML表中的日期

Question

我正在尝试使用HighCharts的HTML脚本从一个表创建一个线条图。

我想要一个datetime x轴，下面是我所做的工作：

• 使用Date.parse(this.innerHTML)将行标题转换为日期字符串。
• 在我的type options对象中将xAxis设置为datetime。

日期转换工作正常，并在默认工具提示中正确显示，但图形本身将x值视为类别，而不是日期时间。我假设它与如何设置point对象有关，但我不知道如何修复它。

Highcharts.visualize = function(table, options) {

    // the categories
    options.xAxis.categories = [];

    $('tbody th', table).each(function(i) {
        var date = Date.parse(this.innerHTML);
        options.xAxis.categories.push(date);
    });

    // the data series
    options.series = [];
    $('tr', table).each(function(i) {
        var tr = this;
        $('th, td', tr).each(function(j) {
            if (j > 0) { // skip first column
                if (i === 0) { // get the name and init the series
                    options.series[j - 1] = {
                        name: this.innerHTML,
                        data: []
                    };
                } else { // add values
                    options.series[j - 1].data.push(parseFloat(this.innerHTML));
                }
            }
        });
    });

    charts[charts.length] = new Highcharts.Chart(options);
};

有什么建议吗？

这里有一个小提琴：http://jsfiddle.net/supertrue/et2Vy/

Answer 1

高级图表将xAxis作为类别来处理，因为您告诉它这样做。

这里：options.xAxis.categories.push(date);

您必须使用{ x: xval, y: yval } (或[xval,yval])作为您的系列的数据类型。

Answer 2

您可能已经将xAxis设置为datetime，但您正在设置类别列表(options.xAxis.categories = [];)。您需要做的是将x，y值作为一个“点”发送到data.push中。

Answer 3

dateTimeLabelFormats :对象为日期时间轴，刻度将自动调整到适当的单位。该成员给出每个单元使用的默认字符串表示形式。有关替换代码的概述，请参阅dateFormat。默认为：{第二：'%H:%M:%S'，分钟：'%H:%M'，小时：'%H:%M'，天：'%e. %b'，周：'%e. %b'，月份：'%b‘’y‘，年份：'%Y’} 高级图表参考示例

无论如何，这可能不是正确的答案，希望这有助于:)