如何使用Chart.js顯示來自.xml文件的數據？

我是Javascript和數據文件的新用戶。我正在構建一個網頁，該網頁使用Chart.js構建的圖表來顯示從創意寫作程序導出的.xml文件中的字符數據。原始的xml文件結構將所有數據存儲在屬性中，因此我重新設計了它，以便它在元素中。如何使用Chart.js顯示來自.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文件是極長的，因爲它包含比其他性別數據，但是這是部分的基本結構我'd想輸入：

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

任何人都可以幫忙嗎？這是我第一次在這裏發帖，但我從他人的問題上得到了很多幫助。我真的很抱歉，如果這個問題是超級基礎，但我只是覺得它很難。

來源

2017-02-28 Kat

最好是以JSON格式提供數據，但如果您唯一的選擇是XML，您可以檢查https://api.jquery.com/jQuery.parseXML – t3mplar

以防萬一有人想知道，我決定去具有JSON的Charts.js的默認數據格式;我只是計劃在報告中討論爲什麼這種改變是必要的。非常感謝所有回答並試圖提供幫助的人！ – Kat

我認爲你應該將xml文件轉換爲JSON，因爲據我所知，chartjs使用JSON作爲數據源。

如果xml是長文件，我認爲你應該將它導入到數據庫表中，然後用其他語言迭代表並生成目標JSON文件。順便說一句，在web應用程序中加載大文件isn'一個聰明的想法。您應該構建一個Web服務來動態接受請求併發送響應。就個人而言，我建議初學者使用nodejs。

來源

2017-02-28 14:29:56 GyxLove521

因爲這是一個我承諾過的項目，而且我有一個截止日期，所以我幾乎被阻止了，我已經說過我會這樣做。 :(謝謝你的迴應，我會和我的主管談談我的方法，看看我能改變什麼。 – Kat

如何使用Chart.js顯示來自.xml文件的數據？

回答

相關問題