So schreiben Sie XML-Dateien für mehrere Liniendiagramme in Javascript

Im Bereich der Datenvisualisierung sind Liniendiagramme eine gängige Visualisierungsmethode. Aufgrund der leistungsstarken Funktionen und der Benutzerfreundlichkeit von JavaScript verwenden viele Menschen JavaScript zum Zeichnen von Liniendiagrammen. In JavaScript ist die Verwendung von XML-Dateien als Datenquellen ebenfalls eine gängige Methode. In diesem Artikel wird ausführlich beschrieben, wie Sie XML-Dateien für Mehrliniendiagramme in JavaScript schreiben.

1. Definition der XML-Datei

XML ist die Abkürzung für Extensible Markup Language. XML-Dateien sind Textdateien, die aus Tags bestehen, die angepasst werden können, um die Struktur und den Inhalt der Daten zu beschreiben. XML-Dateien sind eine wichtige Möglichkeit zum Datenaustausch und zur Datenspeicherung im Internet.

2. Syntax von XML-Dateien

XML-Dateien verwenden eine Reihe gepaarter Tags, um die Struktur und den Inhalt von Daten zu beschreiben. XML-Tags werden von spitzen Klammern „ < > “ umgeben und im Allgemeinen in Start-Tags und End-Tags unterteilt. Das Format des Start-Tags ist „“, das Format des End-Tags ist „“ und der Inhalt zwischen dem Start-Tag und dem End-Tag ist der Tag-Inhalt.

In XML-Dateien können andere Tags zwischen Tags verschachtelt werden und so eine Baumstruktur bilden. Eine XML-Datei kann nur ein Stammelement enthalten, d. h. andere Elemente müssen innerhalb des Stammelements verschachtelt sein. XML-Dateien können auch Kommentare und Dokumenttypdefinitionen enthalten.

3. So schreiben Sie XML-Dateien mit mehreren Liniendiagrammen

Das Folgende ist ein Beispiel für eine XML-Datei mit mehreren Liniendiagrammen:

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

Die XML-Datei enthält ein Stammelement <chart>, das enthält ein <categories>-Tag und mehrere <dataset>-Tags. Das <categories>-Tag wird verwendet, um die x-Achsenskala im Liniendiagramm zu definieren. Es enthält mehrere <category>-Tags, jedes <category&gt ;label des /code>labels ist der Text des Tick-Labels. Das <dataset>-Tag wird verwendet, um die Datenreihe des Liniendiagramms zu definieren. Es enthält mehrere <set>-Tags, jedes <set>Das Attribut value des Tags ist der Datenwert. Das <dataset>-Tag verfügt außerdem über ein seriesName-Attribut, das zur Angabe des Namens der Datenreihe verwendet wird. <chart>，它包含一个<categories>标签和多个<dataset>标签。<categories>标签用于定义折线图中的x轴刻度，它包含多个<category>标签，每个<category>标签的label属性为刻度标签的文本。<dataset>标签用于定义折线图的数据系列，它包含多个<set>标签，每个<set>标签的value属性为数据值。<dataset>标签还有一个seriesName属性，用于指定数据系列的名称。

四、从XML文件读取数据

在JavaScript中，可以使用XMLHttpRequest对象来从服务器获取XML数据，并使用DOM（文档对象模型）或JQuery等工具解析XML文件。以下是一个示例代码：

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");

上述代码中，loadXMLDoc()函数使用XMLHttpRequest对象从服务器获取XML文件，并返回一个XML DOM对象。然后，通过xmlDoc.getElementsByTagName()方法获取XML中的标签，并保存在变量中。

五、绘制多条折线图

获取XML文件中的数据后，就可以使用JavaScript绘制多条折线图了。以下是一个使用Highcharts.js绘制多条折线图的示例代码：

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"));
    })
  }]
});

上述代码中，使用Highcharts.js库绘制多条折线图。在xAxis属性中，使用categories选项指定折线图的x轴刻度，它的值为一个数组，使用[].map.call()方法从categories变量中的<category>标签中读取label属性的值。在series属性中，使用三个数据系列分别代表销售额、支出和利润，使用[].map.call()方法从sales、expenses、profit变量中读取数据。Highcharts.chart()

rrreee

Das obige ist der detaillierte Inhalt vonSo schreiben Sie XML-Dateien für mehrere Liniendiagramme in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!