C3条形图的条形数未知

C3 bar chart unknown number of bars

本文关键字：未知 条形图 C3      更新时间：2023-09-26

我正在使用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阵列有多少个阵列，而这对我来说是不可能知道的。

有没有人尝试过类似的方法，或者知道我该如何解决这个问题？

看起来您正在将图表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'
                }
            });
        }
    }
});
相关文章：