html - 使用图表 js 和外部 json 文件在 HTML 上制作图表

问题描述

所以我正在尝试使用 chart.js 在 html 中制作图表，并且数据来自外部 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个。我尝试制作一个图表，显示有多少漫画具有喜剧类型和超自然类型，所以我在我的 html 文件上尝试了这个，但我认为我做错了，因为当我在浏览器中打开 html 时，它是空的

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

标签： htmlchart.js

html - 使用图表 js 和外部 json 文件在 HTML 上制作图表

问题描述

解决方案

推荐阅读