文章/答案/技术大牛

发布

问Canvasjs堆叠图动态
EN

Stack Overflow用户

提问于 2020-07-13 14:55:30

回答 2查看 77关注 0票数 0

我有像这样的数组，形式是一些URL：

{
    "CABANG B":
        [
            {
                "nama":"Kontrak","jumlah":"30"
            },
            {   
                "nama":"Tetap","jumlah":"197"
            },
            {
                "nama":"Honorer","jumlah":"1"
            },
            {
                "nama":"RUPS","jumlah":"3"
            }
        ],
    "CABANG A":
        [
            {
                "nama":"Kontrak","jumlah":"22"
            },
            {
                "nama":"Tetap","jumlah":"108"
            }
        ]
    }
}

我想创建标签为CABANG B的Chart Stacked Column，CABANG A with column kontra, tetap,荣誉`看起来像this，我有一些代码：

var dataPointR = [];
$.each(data, function(key, val) {
    //key = Cabang A
    dataPointR.push({"label": key})
    $.each(val, function(key2, val2) {
       /// val2.nama = Kontrak 
       /// val2.jumlah = 30
        dataPointR.push({"x": val2.nama ,"y": val2.jumlah})
    })
    dataPointsR.push({"type":"stackedColumn","name": key ,"dataPoints": dataPointR})
})

但不起作用，谢谢

javascript

json

canvasjs

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-07-13 15:27:20

您可以通过这种方式根据给定的链接来制作数据。

<!DOCTYPE HTML>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>

    <script>
        var obj = {
            "CABANG B":
                [
                    {
                        "nama": "Kontrak", "jumlah": "30"
                    },
                    {
                        "nama": "Tetap", "jumlah": "197"
                    },
                    {
                        "nama": "Honorer", "jumlah": "1"
                    },
                    {
                        "nama": "RUPS", "jumlah": "3"
                    }
                ],
            "CABANG A":
                [
                    {
                        "nama": "Kontrak", "jumlah": "22"
                    },
                    {
                        "nama": "Tetap", "jumlah": "108"
                    }
                ]
        };

        var finalData = [];

        $.each(obj, function (key, val) {
            var data = {};
            var dataPointR = [];

            data["name"] = key;
            data["type"] = "stackedColumn";

            $.each(val, function (key2, val2) {
                dataPointR.push({ "x": val2.nama, "y": val2.jumlah })

            });

            data["dataPoints"] = dataPointR;

            finalData.push(data);
        })

        console.log(finalData);

    </script>

</body>

</html>

看看这个，你的数据是这样显示的：

<!DOCTYPE HTML>
<html>

<head>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>

<script>
    var obj = {
        "Kontrak": [
            {
                "nama": "CABANG B", "jumlah": "30"
            },
            {
                "nama": "CABANG A", "jumlah": "22"
            }
        ],
        "Tetap": [
            {
                "nama": "CABANG B", "jumlah": "197"
            },
            {
                "nama": "CABANG A", "jumlah": "108"
            }
        ],
        "Honorer": [
            {
                "nama": "CABANG B", "jumlah": "1"
            }
        ],
        "RUPS": [
            {
                "nama": "CABANG B", "jumlah": "3"
            }
        ],

    }

    var finalData = [];
    var colors = ["#B6B1A8", "#696661", "#EDCA93", "#695A42"];
    var counter = 0;

    $.each(obj, function (key, val) {

        var dataPointR = [];
        var data = {};

        data["type"] = "stackedColumn";
        data["showInLegend"] = true;

        data["name"] = key;
        data["color"] = colors[counter++];

        $.each(val, function (key2, val2) {

            dataPointR.push({ "y": parseInt(val2.jumlah), "label": val2.nama })

        });

        data["dataPoints"] = dataPointR;

        finalData.push(data);
    });

    var chart = new CanvasJS.Chart("chartContainer", {
        animationEnabled: true,
        title: {
            text: "Google - Consolidated Quarterly Revenue",
            fontFamily: "arial black",
            fontColor: "#695A42"
        },
        toolTip: {
            shared: true,
        },
        data: finalData
    });
    chart.render();

</script>

</body>

</html>

票数 0

Stack Overflow用户

发布于 2020-07-13 17:54:48

解决方案我尝试像这样改变我的数组

var obj = {
            "KONTRAK":
                [
                    {
                        "nama": "CABANG A", "jumlah": "30"
                    },
                    {
                        "nama": "CABANG B", "jumlah": "10"
                    },
                    {
                        "nama": "CABANG C", "jumlah": "11"
                    }


                ],
            "TETAP":
                [
                    {
                        "nama": "CABANG A", "jumlah": "22"
                    },
                    {
                        "nama": "CABANG B", "jumlah": "2"
                    },
                    {
                        "nama": "CABANG C", "jumlah": "11"
                    }
                ]
        };

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62870664

复制

相似问题

问Canvasjs堆叠图动态
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Canvasjs堆叠图动态EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Canvasjs堆叠图动态
EN