javascript - 如何使用 Chart.js 显示 .xml 文件中的数据？

Question

我是 Javascript 和数据文件的新用户。我正在构建一个网页，该网页使用 Chart.js 构建的图表来显示从创意写作程序导出的 .xml 文件中的字符数据。原始的 xml 文件结构将所有数据存储在属性中，因此我重新设计了它，使其改为元素中。

我的目标是从该文件中绘制和计算数据并将其显示在图表中。例如，从 .xml 文件中的性别元素中提取女性和男性的数量并将其显示在图表中。我该如何使用 JavaScript 来做到这一点？我已经部分构建了网页并使用硬编码到 JS 中的数据运行，但这并不合适，因为我需要将其链接到我正在使用的程序。

HTML:

<center><h4>Genders</h4>
  <canvas id="genderchart" width="250px" height="250px"></canvas></center>

上面图表的 JS:

    var ctx = document.getElementById("genderchart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'doughnut',
  data: {
    labels: ["NB ", "M ", "F "], 
    datasets: [{
      backgroundColor: [
        "#FFEB3B",
        "#3F51B5",
        "#E91E63"
      ],
      data: [1, 16, 13]

    }]
  },
  options: {
  legend: {
    display: true,
    labels: {
      boxWidth: 13,
    }
  },
}
});

.xml 文件非常长，因为它包含性别以外的数据，但这是我要输入的部分的基本结构:

<characterInfoList>
<harryPotter>
<gender>male</gender>
</harryPotter>

<ronWeasley>
<gender>male</gender>
</ronWeasley>

<hermioneGranger>
<gender>female</gender>
</hermioneGranger>

<lordVoldemort>
<gender>male</gender>
</lordVoldemort>

<albusDumbledore>
<gender>male</gender>
</albusDumbledore>

<severusSnape>
<gender>male</gender>
</severusSnape>
</characterInfoList>

有人可以帮忙吗？这是我第一次在这里发帖，但我从之前发布的其他人的问题中得到了很多帮助。如果这个问题非常基础，我真的很抱歉，但我只是发现它太难了。

Answer 1

我认为你应该将 xml 文件转换为 JSON，因为据我所知，chartjs 使用 JSON 作为数据源。

如果xml是长文件，我认为你应该将它导入到数据库表中。然后用其他语言迭代该表并生成目标JSON文件。顺便说一句，在Web应用程序中加载大文件不是一个聪明的主意。您应该构建一个 Web 服务来动态接受请求并发送响应。就我个人而言，我推荐初学者使用nodejs。