Chart.jsを使用して.xmlファイルからデータを表示するにはどうすればよいですか？

Question

私はJavascriptとデータファイルの非常に新しいユーザーです。私は、Chart.jsで構築されたチャートを使用して、クリエイティブライティングプログラムからエクスポートされた.xmlファイルの文字データを表示するWebページを構築しています。元の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ファイルそれが性別以外のデータが含まれていますが、このセクションの基本的な構造であるため、非常に長いですI入力したい：

<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

私は知っているので、chartjsはデータソースとしてJSONを使用しているので、xmlファイルをJSONに変換する必要があると思います。

xmlが長いファイルの場合は、データベーステーブルにインポートする必要があると思います。他の言語でテーブルを繰り返し、ターゲットJSONファイルを生成してください。ところで、Webアプリケーションに大きなファイルをロードするis not 'スマートなアイデア。動的に要求を受け入れ、応答を送信するWebサービスを構築する必要があります。個人的には、nodejsを初心者におすすめします。