如何在jquery中获取数据作为图表的输入?

时间:2017-07-14 17:15:00

标签: javascript jquery arrays json chart.js

我想使用chart.js在我的网页上创建几个图表,现​​在我从控制器收到的数据采用以下格式,

{
    "dataset" : [
        {
            "name" : "Sarah",
            "age" : "23",
            "gender" : "female",
            "country" : "australia",
            "occupation" : "student"
        },
        {
            "name" : "Randy",
            "age" : "19",
            "gender" : "male",
            "country" : "america",
            "occupation" : "student"
        },
        {
            "name" : "Roger",
            "age" : "32",
            "gender" : "male",
            "country" : "germany",
            "occupation" : "software professional"
        },
        {
            "name" : "Maverick",
            "age" : "10",
            "gender" : "male",
            "country" : "america",
            "occupation" : "student"
        },
        {
            "name" : "Riya",
            "age" : "25",
            "gender" : "female",
            "country" : "australia",
            "occupation" : "software professional"
        },
        {
            "name" : "Glade",
            "age" : "30",
            "gender" : "female",
            "country" : "India",
            "occupation" : "teacher"
        }
    ]
}

现在,我想在3个饼图上绘制这些信息, 1)饼图,显示原产国的数量。 2)显示职业数量的饼图。 3)饼图,显示年龄小于25岁的人数。

理想情况下,图表采用以下格式的信息,

var pieData = {
                graph-data: 
                [
                    {
                        name : country,
                        dataset : [
                            {
                                value: america,
                                count: 2,
                                color:"#878BB6"
                            },
                            {
                                value: india,
                                count : 1,
                                color : "#4ACAB4"
                            },
                            {
                                value: germany,
                                count : 1,
                                color : "#FF8153"
                            },
                            {
                                value: australia,
                                count : 2,
                                color : "#FFEA88"
                            }
                        ]
                    },
                    {
                        name : occupation,
                        dataset : [
                            {
                                value: "student",
                                count: 3,
                                color:"#878BB6"
                            },
                            {
                                value: "software professional",
                                count : 2,
                                color : "#4ACAB4"
                            },
                            {
                                value: "teacher",
                                count : 1,
                                color : "#FF8153"
                            }
                        ]
                    },
                    {
                        name : "age",
                        dataset : [
                            {
                                value: "23",
                                count: 1,
                                color:"#878BB6"
                            },
                            {
                                value: "19",
                                count : 1,
                                color : "#4ACAB4"
                            },
                            {
                                value: "10",
                                count : 1,
                                color : "#FF8153"
                            },
                            {
                                value: "25",
                                count : 1,
                                color : "#FF8423"
                            }
                        ]
                    }
                ]
            };

从上面的json可以看出,graph-data键有3个数组元素,每个元素对应一个图表。如何从初始原始数据集构造此数据并将其传递给我的chart.js以供消费?我猜我会要求编写转换器,如何在js / jquery中实现这一点,任何有关此信息都非常感谢。谢谢你!

0 个答案:

没有答案