Question

我正在尝试使用HighCharts的HTML-table-to-chart脚本从表格创建折线图。

我想要一个datetime x轴，所以这就是我所做的：

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

日期转换正常并且在默认工具提示中正确显示，但图表本身将x值视为类别，而不是日期时间。我假设它与如何设置点对象有关，但我不确定如何解决它。

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

Highcharts将x轴视为类别，因为您告诉它这样做这里：options.xAxis.categories.push(date);

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

Answer 2

您可能已将xAxis设置为日期时间，但您正在设置类别列表（options.xAxis.categories = [];）。你需要做的是发送x，y值作为一个＆＃34;点＆＃34;进入你的data.push。

Answer 3

dateTimeLabelFormats：Object 对于日期时间轴，刻度将自动调整为适当的单位。该成员提供用于每个单元的默认字符串表示。有关替换代码的概述，请参阅dateFormat。默认为： { 第二：＆＃39;％H：％M：％S＆＃39;，分钟：＆＃39;％H：％M＆＃39;，小时：＆＃39;％H：％M＆＃39;，日：＆＃39;％e。％B＆＃39 ;, 周：＆＃39;％e。％B＆＃39 ;, 月：＆＃39;％b \＆＃39;％y＆＃39;，年：＆＃39;％Y＆＃39; } example on highcharts reference

这可能不是正确的答案，希望这会有所帮助：）

从Highcharts中的HTML表中解析日期

3 个答案: