Javascript 从包含多个数据点的CSV文件加载HighCharts

经过多次搜索，我想把头撞在桌子上，我把我的第一个问题贴在stackoverflow上

我有一个ASP.NET web应用程序，它在服务器端生成一些数据，并在服务器上创建一个CSV文件

我在用HighCharts生成一个图表。不过，一切都很好，根据用户运行的日期范围，可能有几个数据点，也可能有很多数据点

当有许多数据点时，问题就出现了。看看X轴，你就会明白我的意思了。在X轴上没有显示每个点的情况下，是否有“分组”这些点

日期是随机间隔的

我用客户端代码和JavaScript变量中的CSV文件内容创建了一个JSFIDLE

这是我的密码：

function parseDate(dateStr) {
    var matches = dateStr.match(/([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{4})/)
    return Date.UTC(matches[3], matches[1]-1, matches[2]);
}

var csv = 'Chart,3/4/2007,3/24/2007,4/13/2007,4/25/2007,9/19/2007,9/28/2007,11/5/2007,1/7/2008,1/14/2008,1/21/2008,1/27/2008,2/3/2008,2/10/2008,2/17/2008,2/24/2008,3/2/2008,3/23/2008,3/30/2008,4/5/2008,4/21/2008,5/3/2008,5/10/2008,5/17/2008,5/24/2008,5/31/2008,6/8/2008,6/15/2008,6/29/2008,7/4/2008,7/18/2008,7/25/2008,8/1/2008,8/8/2008,9/17/2010,11/25/2010,8/16/2012,1/17/2013,1/27/2013\nDates,180.00,175.50,167.00,166.50,170.00,171.50,174.00,163.00,162.50,164.00,166.50,166.50,167.50,170.00,170.00,171.00,169.00,166.50,166.00,166.50,162.00,160.00,160.50,162.50,164.00,164.00,165.00,165.50,166.00,169.00,171.00,170.00,171.00,165.00,165.00,189.00,177.00,175.50';

var options = {
        chart: {
            renderTo: 'chart',
            defaultSeriesType: 'line'
        },
        title: {
            text: 'Test Chart'
        },
        xAxis: {
           type: 'datetime',
            categories: []
        },
        yAxis: {
            title: {
                text: 'Pounds'
            }
        },
        series: []
    };
    // Split the lines
        var lines = csv.split('\n');
        $.each(lines, function(lineNo, line) {
            var items = line.split(',');
            if (lineNo == 0) {
                $.each(items, function(itemNo, item) {
                    if (itemNo > 0) options.xAxis.categories.push(parseDate(item));
                });
            }
            else {
                var series = { 
                    data: []
                };
                $.each(items, function(itemNo, item) {
                    if (itemNo == 0) {
                        series.name = item;
                    } else {
                        series.data.push(parseFloat(item));
                    }
                });
                options.series.push(series);
            }
        });

        var chart = new Highcharts.Chart(options);

以下是指向JSFIDLE的链接：

提前感谢,

---

Robert

查看HighStocks及其数据分组功能：

---

它可以处理比HighCharts大得多的数据集。然而，也有一些缺点，因为最新的HighCharts功能并不总是立即出现在HighStock中。如果您想测试HighStocks，通常只需要对语法进行一些小的更改。

我最终实现了这一点，但从未发布过答案。。。答案是这样的

仔细看看：

series.data.push（[parseDate（点[0]）、parseFloat（点[1]））

在下面的代码中

function parseDate(dateStr) {
    var matches = dateStr.match(/([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{4})/)
    return Date.UTC(matches[3], matches[1] - 1, matches[2]);
}

var csv = 'Chart,11/1/2013|6,11/2/2013|4,11/3/2013|6,11/4/2013|3,11/5/2013|5,11/6/2013|5,11/7/2013|5,11/8/2013|6,11/9/2013|4,11/10/2013|13,11/11/2013|12,11/12/2013|3,11/13/2013|5,11/14/2013|7,11/15/2013|9,11/16/2013|0,11/17/2013|2,11/18/2013|3,11/19/2013|2,11/20/2013|16,11/21/2013|6,11/22/2013|9,11/23/2013|9,11/24/2013|20,11/25/2013|10,11/26/2013|10,11/27/2013|4,11/28/2013|9,11/29/2013|7,11/30/2013|7';

var options = {
    chart: {
        renderTo: 'chart',
        type: 'line'
    },
    title: {
        text: 'Sales'
    },
    xAxis: {
        type: 'datetime'
    },
    series: []
};

var lines = csv.split('\n');
    $.each(lines, function (lineNo, line) {
        var items = line.split(',');
        var series = {
            data: []
        };
        $.each(items, function (itemNo, item) {
            if (itemNo == 0) {
                series.name = item;
            } else {
                var points = item.split('|');
                series.data.push([parseDate(points[0]), parseFloat(points[1])]);
            }
        });
        options.series.push(series);
    });
    var chart = new Highcharts.Chart(options);

---

非常感谢！我能像你说的那样，用最小的改动让它工作。你介意再看一次JSFIDLE吗？我更新了它，但是日期是怎么回事？我错过了什么，还是出了什么问题？不过看起来好多了！问题，为什么你们要把时间戳分类？我怀疑您可以将数据重新格式化为[timestamp，data]格式，就像这里主要HighStocked示例使用的数据集：