Создание диаграммы на HTML с использованием диаграммы js и внешнего файла json - PullRequest
Новая
       7

Создание диаграммы на HTML с использованием диаграммы js и внешнего файла json

0 голосов
/ 06 мая 2020

Итак, я пытаюсь создать диаграмму в html с помощью диаграммы. js, а данные взяты из внешнего файла json. Это мой json файл с именем manga140. json

[
{
    "cover_title": "Death Note: Tokubetsu Yomikiri",
    "cover_studio": "",
    "cover_img": "https://s4.anilist.co/file/anilistcdn/media/manga/cover/large/bx115122-HWsbTNeZyoFD.jpg",
    "format": "One Shot",
    "duration": "74%",
    "description": "The chapter will center on Ryuk's Death Note being brought again to the human world, after the end of the main manga.",
    "genres": [
        "Mystery ",
        " Supernatural"
    ]
},
{
    "cover_title": "Kakkou no Iinazuke",
    "cover_studio": "",
    "cover_img": "https://s4.anilist.co/file/anilistcdn/media/manga/cover/large/bx114383-05Uo5j9nIzf8.png",
    "format": "Manga",
    "duration": "64%",
    "description": "Kakkou no Iinazuke's story revolves around 2 teenagers who got switched soon after their birth. Hoping to keep both of their biological and adopted children, their parents decided to engage the boy and the girl.",
    "genres": [
        "Comedy ",
        " Romance"
    ]
},
{
    "cover_title": "MASHLE",
    "cover_studio": "",
    "cover_img": "https://s4.anilist.co/file/anilistcdn/media/manga/cover/medium/b114960-td2C5YPWPvre.jpg",
    "format": "Manga",
    "duration": "64%",
    "description": "This is a world of magic where magic is used for everything. But deep in the forest exists a young man who spends his time training and bulking up. He can't use magic, but he enjoys a peaceful life with his father. But one day, his life is put in danger! Will his muscular body protect him from the magic users who are out to get him? Powerfully trained muscles crush magic as this abnormal magical fantasy begins!\n\n(Source: MANGA Plus)",
    "genres": [
        "Action ",
        " Fantasy ",
        " Comedy"
    ]
}
]

, и у меня их около 30. Я пытаюсь составить диаграмму, которая показывает, сколько манги в жанрах комедии и сверхъестественного пришел пустой 

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <canvas id="myChart"></canvas>
    </div>

    <script>
        let data;
        $.getJSON("manga140.json", function(json){
                data = json;
                });

        let comedy = 0;
        let superNatural = 0;
        for (i = 0; i < data.length; i++)
        {
            let genres = data[i]['genres']
            for (j = 0; j < genress.length; j++)
            {
                let value = genres[j].trim()
                if (value.toLowerCase() == 'comedy')
                {
                    comedy = comedy +1
                }
                if (value.toLowerCase() == 'supernatural')
                {
                    superNatural = superNatural + 1    
                }
            }
        }

        let myChart = document.getElementById('myChart').getContext('2d');

        let massPopChart = new Chart(myChart, {
            type: 'bar',
            data: {
                labels:['Comedy', 'Super Natural'],
                datasets:[{
                    label : 'Genre',
                    data: [
                    comedy,
                    superNatural
                    ],
                }]
            },
            options : {},
        });

    </script>

</body>

...