Bagaimana untuk menulis fail xml untuk carta baris berbilang dalam javascript

Dalam bidang visualisasi data, carta garis ialah kaedah visualisasi yang biasa Disebabkan oleh keupayaan berkuasa dan kemudahan penggunaan JavaScript, ramai orang menggunakan JavaScript untuk melukis carta garis. Dalam JavaScript, menggunakan fail XML sebagai sumber data juga merupakan cara biasa. Artikel ini akan memperkenalkan secara terperinci cara menulis fail XML untuk berbilang carta baris dalam JavaScript.

1. Definisi fail XML

XML ialah singkatan daripada Extensible Markup Language. Fail XML ialah fail teks yang terdiri daripada tag boleh disesuaikan untuk menerangkan struktur dan kandungan data. Fail XML ialah cara penting pertukaran data dan penyimpanan data di Internet.

2. Sintaks fail XML

Fail XML menggunakan satu siri tag berpasangan untuk menerangkan struktur dan kandungan data. Teg XML dikelilingi oleh kurungan sudut " < > " dan biasanya dibahagikan kepada teg mula dan teg akhir. Format teg mula ialah "", format teg akhir ialah "", dan kandungan antara teg mula dan teg akhir ialah kandungan teg.

Dalam fail XML, teg lain boleh bersarang di antara teg, membentuk struktur pokok. Fail XML hanya boleh mengandungi satu elemen akar, iaitu elemen lain mesti bersarang dalam elemen akar. Fail XML juga boleh mengandungi ulasan dan definisi jenis dokumen.

3. Cara menulis fail XML carta baris berbilang

Berikut ialah contoh fail XML carta baris berbilang:

<?xml version="1.0" encoding="UTF-8"?>
<chart>
  <categories>
    <category label="2010"/>
    <category label="2011"/>
    <category label="2012"/>
    <category label="2013"/>
    <category label="2014"/>
    <category label="2015"/>
    <category label="2016"/>
  </categories>
  <dataset seriesName="Sales">
    <set value="560000" />
    <set value="620000" />
    <set value="590000" />
    <set value="680000" />
    <set value="730000" />
    <set value="740000" />
    <set value="785000" />
  </dataset>
  <dataset seriesName="Expenses">
    <set value="400000" />
    <set value="450000" />
    <set value="430000" />
    <set value="480000" />
    <set value="520000" />
    <set value="570000" />
    <set value="600000" />
  </dataset>
  <dataset seriesName="Profit">
    <set value="160000" />
    <set value="170000" />
    <set value="150000" />
    <set value="200000" />
    <set value="210000" />
    <set value="170000" />
    <set value="185000" />
  </dataset>
</chart>

Fail XML mengandungi akar elemen <chart>, yang mengandungi satu teg <categories> dan berbilang tag <dataset>. Teg <categories> digunakan untuk mentakrifkan skala paksi-x dalam carta garisan Ia mengandungi berbilang tag <category> Atribut <category> bagi setiap teg label ialah teks label skala. Teg <dataset> digunakan untuk mentakrifkan siri data carta baris Ia mengandungi berbilang teg <set> dan atribut <set> setiap teg value ialah nilai data. Teg <dataset> juga mempunyai atribut seriesName yang menentukan nama siri data.

4. Membaca data daripada fail XML

Dalam JavaScript, anda boleh menggunakan objek XMLHttpRequest untuk mendapatkan data XML daripada pelayan dan menggunakan alatan seperti DOM (Document Object Model) atau JQuery untuk menghuraikan fail XML. Berikut ialah contoh kod:

function loadXMLDoc(filename) {
  if (window.XMLHttpRequest) {
    xhttp = new XMLHttpRequest();
  } else {
    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xhttp.open("GET", filename, false);
  xhttp.send();
  return xhttp.responseXML;
}

var xmlDoc = loadXMLDoc("myData.xml");
var categories = xmlDoc.getElementsByTagName("category");
var sales = xmlDoc.getElementsByTagName("dataset")[0].getElementsByTagName("set");
var expenses = xmlDoc.getElementsByTagName("dataset")[1].getElementsByTagName("set");
var profit = xmlDoc.getElementsByTagName("dataset")[2].getElementsByTagName("set");

Dalam kod di atas, fungsi loadXMLDoc() menggunakan objek XMLHttpRequest untuk mendapatkan fail XML daripada pelayan dan mengembalikan objek XML DOM. Kemudian, dapatkan teg dalam XML melalui kaedah xmlDoc.getElementsByTagName() dan simpan dalam pembolehubah.

5. Lukiskan berbilang carta baris

Selepas mendapatkan data dalam fail XML, anda boleh menggunakan JavaScript untuk melukis berbilang carta baris. Berikut ialah contoh kod yang menggunakan Highcharts.js untuk melukis berbilang carta baris:

Highcharts.chart('container', {
  title: {
    text: 'Sales, Expenses, Profit for 2010-2016'
  },
  xAxis: {
    categories: [].map.call(categories, function(category) {
      return category.getAttribute("label");
    })
  },
  yAxis: {
      title: {
          text: 'Amount (USD)'
      }
  },
  series: [{
    name: 'Sales',
    data: [].map.call(sales, function(set) {
      return parseInt(set.getAttribute("value"));
    })
  }, {
    name: 'Expenses',
    data: [].map.call(expenses, function(set) {
      return parseInt(set.getAttribute("value"));
    })
  }, {
    name: 'Profit',
    data: [].map.call(profit, function(set) {
      return parseInt(set.getAttribute("value"));
    })
  }]
});

Dalam kod di atas, perpustakaan Highcharts.js digunakan untuk melukis berbilang carta baris. Dalam atribut xAxis, gunakan pilihan categories untuk menentukan skala paksi-x carta garisan. Gunakan kaedah [].map.call() untuk membaca atribut categories daripada teg <category> dalam nilai label. Dalam atribut series, gunakan tiga siri data untuk mewakili jualan, perbelanjaan dan keuntungan masing-masing dan gunakan kaedah [].map.call() untuk membaca data daripada pembolehubah sales, expenses dan profit. Kaedah Highcharts.chart() akan mencipta elemen HTML dalam halaman untuk memaparkan carta garisan yang dilukis.

6. Ringkasan

Artikel ini memperkenalkan cara menulis fail XML untuk carta baris berbilang dalam JavaScript dan menyediakan kod sampel untuk membaca data daripada fail XML dan melukis carta garis. Menggunakan fail XML untuk menerangkan struktur dan kandungan data boleh menjadikan data lebih berstruktur dan boleh dibaca, menjadikannya lebih mudah untuk JavaScript membaca dan menghuraikan data. Carta garis ialah cara biasa untuk menggambarkan data, yang boleh membantu orang memahami data dengan lebih intuitif.

Atas ialah kandungan terperinci Bagaimana untuk menulis fail xml untuk carta baris berbilang dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!