Question

我有一个JSON数组，想要用C3.js创建一个图表。我的例子只给了我一行。我想为每个用户显示一行。我怎样才能做到这一点？

这是我的代码：

this.chart = c3.generate({
    data: {
        json: [
            {
                ExamID: 'Exam1',
                result: 80,
                user:"user1"
            },
            {
                ExamID: 'Exam2',
                result: 90,
                user:"user1"
            },
            {
                ExamID: 'Exam1',
                result: 70,
                user:"user2"
            },
            {
                ExamID: 'Exam2',
                result: 60,
                user:"user2"
            }
        ],
        keys: {
            x: 'ExamID',
            value: ['result'],
        },
    },
    axis: {
        x: {
            type: 'category',
        }
    }
});

Answer 1

您需要具有不同的JSON结构。数组中的每个对象（每个考试）都需要包含所有学生的成绩。您可以为每个学生使用一个键，并使用属性names重命名图例的键。这是一个小提琴：https://jsfiddle.net/b5pd3wn6/

var chart = c3.generate({
    bindto: "#element",
    data: {
        json: [
            {
                ExamID: 'Exam1',
                user1: 80,
                user2: 50
            }, {
                ExamID: 'Exam2',
                user1: 90,
                user2: 40
            }
        ],
        keys: {
            x: 'ExamID',
            value: ['user1', 'user2']
        },
        names: {
            'user1': 'Peter Miller',
            'user2': 'Vladimir Peterhans'
        }
    },
    axis: {
        x: {
            type: 'category'
        }
    }
});

c3.js与json，分割线

1 个答案: