0

多くの検索を行い、机に頭をぶつけたいと思った後、最初の質問をstackoverflowに投稿しています。

サーバー側でデータを生成し、サーバー上に CSV ファイルを作成する ASP.NET Web アプリケーションがあります。

HighCharts を使用してグラフを作成しています。すべてがうまく機能していますが、ユーザーが実行する日付範囲の種類によっては、データ ポイントが少ない場合と多い場合があります。

多くのデータポイントがある場合に問題が発生します。X 軸を見れば、私の言いたいことがわかるでしょう。X軸上のすべての点を表示しない場合、これらを「グループ化」する方法はありますか?

日付はランダムな間隔です。

クライアント側のコードと CSV ファイルの内容を JavaScript 変数で使用して 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/

前もって感謝します、

ロバート

4

2 に答える 2

0

HighStocks とその DataGrouping 機能を確認してください。

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

HighCharts よりもはるかに大きなデータセットを処理できます。ただし、最新の HighCharts 機能が常に HighStocks にすぐに反映されるとは限らないという欠点があります。テストしたい場合、通常、HighStocks を使用するために必要な構文の変更はわずかです。

于 2013-04-01T16:04:32.890 に答える
0

私はこれを機能させてしまい、答えを投稿しませんでした...これが答えです。

以下をよく見てください。

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

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

于 2015-11-04T18:30:27.433 に答える