Холст js Динамическая диаграмма с накоплением - PullRequest
Новая
       174

Холст js Динамическая диаграмма с накоплением

0 голосов
/ 13 июля 2020

У меня есть такой массив в виде некоторого 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"
            }
        ]
    }
}

Я хочу создать Chart Stacked Column с меткой CABANG B, CABANG A with column kontra , tetap , honorer` выглядит это , у меня какой-то код: 

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})
})

Но не работает, спасибо

Ответы [ 2 ]

1 голос
/ 13 июля 2020

решить, я пытаюсь изменить свой массив следующим образом 

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"
                    }
                ]
        };
0 голосов
/ 13 июля 2020

Таким образом вы можете внести свои данные по данной ссылке. 

<!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>
...