Question

经过多次搜索，我想把头撞到桌子上，我在stackoverflow上发布了第一个问题。

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

我正在使用HighCharts制作图表。一切都很好，但是，根据用户运行的日期范围，可以有一些数据点或许多数据点。

当有许多数据点时会出现问题。看看X轴，你会明白我的意思。无论如何要将这些“组合”在没有显示X轴上的每一个点的地方吗？

日期是随机的。

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

这是我的代码：

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);

以下是JSFiddle的链接：

http://jsfiddle.net/Q2hyF/6/

先谢谢，

罗伯特

Answer 1

查看HighStocks及其DataGrouping功能：

http://www.highcharts.com/stock/demo/data-grouping

它可以处理比HighCharts更大的数据集。但是，有一些缺点，因为最新的HighCharts功能并不总是立即在HighStocks中。如果要测试它，通常只需要对使用HighStocks的语法进行微小的更改。

Answer 2

我最终得到了这个工作，从未发布答案......这就是答案。

仔细看看：

series.data.push（[parseDate（points [0]），parseFloat（points [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);

http://jsfiddle.net/rswilley601/gtsLatyr/

HighCharts从具有多个数据点的CSV文件加载

2 个答案: