0

C3.js を使用して棒グラフを作成しています。

私の場合は次のとおりです。

多数のデータを収集してチャートに表示したいのでX、次のスクリプトを作成しました。

    $.ajax({
    type: 'POST',
    url: '/AcademyStat/academy_module_user_report',
    dataType: 'json',
    data: {
        request: 'ajax',
        team_id: team_id,
        module_id: module_id
    },
    success: function (data)
    {
        if(data != null)
        {
            for (var i = 0; i < data.length; i++)
            {
                var add_data = [data[i]['name'], data[i]['score']]
                char_data.push(add_data);
            }
            var chart = c3.generate({
                bindto: '#score_chart',
                data: {
                    columns: [
                        char_data

                    ],
                    type: 'bar'
                }
            });
        }
    }
});

上記の例からわかるように、データをループしてから、配列の配列 (不明な数のデータ) が得られるまでそれを配列に追加しています。

ただし、これをブラウザで実行すると、次のエラーが表示されますconsole。

    Error: Invalid value for <path> attribute d="M 286.6,NaN L286.6,NaN L531.4,NaN L531.4,NaN z" d3.min.js:5
Error: Invalid value for <path> attribute d="M 1102.6,NaN L1102.6,NaN L1347.3999999999999,NaN L1347.3999999999999,NaN z" d3.min.js:5
Error: Invalid value for <path> attribute d="M 286.6,NaN L286.6,NaN L531.4,NaN L531.4,NaN z" d3.min.js:5
Error: Invalid value for <path> attribute d="M 1102.6,NaN L1102.6,NaN L1347.3999999999999,NaN L1347.3999999999999,NaN z" d3.min.js:5
Error: Invalid value for <path> attribute d="M 286.6,NaN L286.6,NaN L531.4,NaN L531.4,NaN z" d3.min.js:5
Error: Invalid value for <path> attribute d="M 1102.6,NaN L1102.6,NaN L1347.3999999999999,NaN L1347.3999999999999,NaN z" d3.min.js:5
Error: Invalid value for <path> attribute d="M 286.6,NaN L286.6,NaN L531.4,NaN L531.4,NaN z" d3.min.js:5
Error: Invalid value for <path> attribute d="M 1102.6,NaN L1102.6,NaN L1347.3999999999999,NaN L1347.3999999999999,NaN z" d3.min.js:5
Error: Invalid value for <path> attribute d="M 286.6,NaN L286.6,NaN L531.4,NaN L531.4,NaN z" d3.min.js:5
Error: Invalid value for <path> attribute d="M 1102.6,NaN L1102.6,NaN L1347.3999999999999,NaN L1347.3999999999999,NaN z" d3.min.js:5
Error: Invalid value for <path> attribute d="M 286.6,NaN L286.6,NaN L531.4,NaN L531.4,NaN z" d3.min.js:5
Error: Invalid value for <path> attribute d="M 1102.6,NaN L1102.6,NaN L1347.3999999999999,NaN L1347.3999999999999,NaN z" d3.min.js:5
Error: Invalid value for <path> attribute d="M 286.6,NaN L286.6,NaN L531.4,NaN L531.4,NaN z" d3.min.js:5
Error: Invalid value for <path> attribute d="M 1102.6,NaN L1102.6,NaN L1347.3999999999999,NaN L1347.3999999999999,NaN z" d3.min.js:5
Error: Invalid value for <path> attribute d="M 286.6,NaN L286.6,NaN L531.4,NaN L531.4,NaN z" d3.min.js:5
Error: Invalid value for <path> attribute d="M 1102.6,NaN L1102.6,NaN L1347.3999999999999,NaN L1347.3999999999999,NaN z" d3.min.js:5
Error: Invalid value for <path> attribute d="M 286.6,NaN L286.6,NaN L531.4,NaN L531.4,NaN z" d3.min.js:5
Error: Invalid value for <path> attribute d="M 1102.6,NaN L1102.6,NaN L1347.3999999999999,NaN L1347.3999999999999,NaN z" d3.min.js:5
Error: Invalid value for <path> attribute d="M 286.6,NaN L286.6,NaN L531.4,NaN L531.4,NaN z" d3.min.js:5
Error: Invalid value for <path> attribute d="M 1102.6,NaN L1102.6,NaN L1347.3999999999999,NaN L1347.3999999999999,NaN z" d3.min.js:5
Error: Invalid value for <path> attribute d="M 286.6,NaN L286.6,NaN L531.4,NaN L531.4,NaN z" d3.min.js:5
Error: Invalid value for <path> attribute d="M 1102.6,NaN L1102.6,NaN L1347.3999999999999,NaN L1347.3999999999999,NaN z

ただし、代わりにメソッドを使用するとpop、データは正常に表示されます。唯一の問題pop();は、アレイにいくつのアレイがあるかを知る必要がchar_dataあり、それを知ることができないことです。

誰かが同様のことを試したことがありますか、またはこの問題を解決する方法を知っていますか?

4

1 に答える 1

1

チャートcolumnsを配列内の配列に設定しているようですcolumns: [ [ ['name', 'score'] ] ]

columns: [ char_data ]をに変更columns: char_data

$.ajax({
    type: 'POST',
    url: '/AcademyStat/academy_module_user_report',
    dataType: 'json',
    data: {
        request: 'ajax',
        team_id: team_id,
        module_id: module_id
    },
    success: function (data) {
        if (data != null) {
            for (var i = 0; i < data.length; i++) {
                var add_data = [data[i]['name'], data[i]['score']]
                char_data.push(add_data);
            }
            var chart = c3.generate({
                bindto: '#score_chart',
                data: {
                    columns: char_data,
                    type: 'bar'
                }
            });
        }
    }
});
于 2014-11-06T16:55:32.013 に答える