Question

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

我的目标是绘制和计算此文件中的数据并将其显示在图表中。例如，从我的.xml文件中的gender元素中绘制女性和男性的数量，并在图表中显示该数量。我怎么用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。

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

1 个答案: