Диаграмма. js с использованием значения определенных данных во внешнем json файле - PullRequest
Новая
       4

Диаграмма. js с использованием значения определенных данных во внешнем json файле

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

Я работаю над этим самоисследованием, и я хочу показать диаграмму, которая показывает, сколько аниме имеют жанры комедии или фэнтези. Данные для моей диаграммы будут внешним файлом json (аниме. json) на моем компьютере, и он еще не содержит общего количества аниме в жанрах комедии или фэнтези, поэтому мне нужно сделать несколько oop знать это. Я пытаюсь это сделать, используя этот код: 

<!DOCTYPE html>
<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("anime.json", function(json){
            data = json;
            });

    let comedy = 0;
    let fantasy= 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() == 'fantasy')
            {
                fantasy = fantasy + 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>
</html>

Но когда я открываю этот html в своем браузере, он оказывается пустым, поэтому мне интересно, что это правильный способ сделать Это. А это мой json файл (а их у меня 25 или 30): 

[
{
    "cover_title": "Haikyuu!! TO THE TOP",
    "cover_studio": "Production I.G",
    "cover_img": "https://s4.anilist.co/file/anilistcdn/media/anime/cover/large/bx106625-UR22wB2NuNVi.png",
    "format": "TV",
    "duration": "84%",
    "description": "The fourth season of Haikyuu!!\n\nThe Karasuno High School Volleyball Club finally won their way into the nationals after an intense battle for the Miyagi Prefecture Spring Tournament qualifiers. As they were preparing for the nationals, Kageyama is invited to go to All-Japan Youth Training Camp. At the same time, Tsukishima is invited to go to a special rookie select training camp for first-years in Miyagi Prefecture. Hinata feels panic that he\u2019s being left behind as one of the first-years and then decides to show up at the Miyagi Prefecture rookie select training camp anyway...\n\n(Source: Crunchyroll)",
    "genres": [
        "Comedy ",
        " Drama ",
        " Sports"
    ]
},
{
    "cover_title": "Eizouken ni wa Te wo Dasu na!",
    "cover_studio": "Science SARU",
    "cover_img": "https://s4.anilist.co/file/anilistcdn/media/anime/cover/large/bx109298-YvjfI88hX76T.png",
    "format": "TV",
    "duration": "79%",
    "description": "First year high schooler Midori Asakusa loves anime so much, she insists that \"concept is everything\" in animation. Though she draws a variety of ideas in her sketchbook, she hasn't taken the first step to creating anime, insisting that she can't do it alone. The producer-type Sayaka Kanamori is the first to notice Asakusa's genius. Then, when it becomes clear that their classmate, charismatic fashion model Tsubame Mizusaki, really wants to be an animator, they create an animation club to realize the \"ultimate world\" that exists in their minds.\n\n(Source: Crunchyroll)",
    "genres": [
        "Adventure ",
        " Comedy"
    ]
},
{
    "cover_title": "Made in Abyss: Fukaki Tamashii no Reimei",
    "cover_studio": "Kinema Citrus",
    "cover_img": "https://s4.anilist.co/file/anilistcdn/media/anime/cover/large/bx100643-fPH9OgEKKvcI.jpg",
    "format": "Movie",
    "duration": "78%",
    "description": "Dawn of the Deep Soul continues the epic adventure of plucky Riko and Reg who are joined by their new friend Nanachi. Together they descend into the Abyss\u2019 treacherous fifth layer, the Sea of Corpses, and encounter the mysterious Bondrewd, a legendary White Whistle whose shadow looms over Nanachi\u2019s troubled past. Bondrewd is ingratiatingly hospitable, but the brave adventurers know things are not always as they seem in the enigmatic Abyss...\n\n(Source: Sentai Filmworks)",
    "genres": [
        "Adventure ",
        " Fantasy ",
        " Sci-Fi ",
        " Drama"
    ]
}]

Спасибо!

1 Ответ

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

Кажется, ваш код в порядке, единственное, что я вижу, это то, что вы неправильно обрабатываете обратный вызов. Код, который вы написали после $.getJSON, следует поместить в функцию обратного вызова. Поскольку из-за поведения asyn c ваши данные устанавливаются после выполнения других кодов. Если вы откроете console, вы можете увидеть ошибку как cannot read property length of undefined, поскольку изначально данные не определены.

Приведенный ниже фрагмент должен исправить вашу проблему. 

<script>
$.getJSON("anime.json", function (json) {
  const data = json;
  let comedy = 0;
  let fantasy = 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() == "fantasy") {
        fantasy = fantasy + 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>
...