Comment écrire des fichiers XML pour plusieurs graphiques linéaires en javascript

Dans le domaine de la visualisation de données, les graphiques linéaires sont une méthode de visualisation courante. En raison des puissantes capacités et de la facilité d'utilisation de JavaScript, de nombreuses personnes utilisent JavaScript pour dessiner des graphiques linéaires. En JavaScript, l'utilisation de fichiers XML comme sources de données est également une méthode courante. Cet article présentera en détail comment écrire des fichiers XML pour des graphiques à plusieurs courbes en JavaScript.

1. Définition du fichier XML

XML est l'abréviation de Extensible Markup Language. Les fichiers XML sont des fichiers texte composés de balises pouvant être personnalisées pour décrire la structure et le contenu des données. Les fichiers XML constituent un moyen important d'échange et de stockage de données sur Internet.

2. Syntaxe des fichiers XML

Les fichiers XML utilisent une série de balises appariées pour décrire la structure et le contenu des données. Les balises XML sont entourées de crochets angulaires " < > " et sont généralement divisées en balises de début et de fin. Le format de la balise de début est "", le format de la balise de fin est "", et le contenu entre la balise de début et la balise de fin est le contenu de la balise.

Dans les fichiers XML, d'autres balises peuvent être imbriquées entre les balises, formant une arborescence. Un fichier XML ne peut contenir qu'un seul élément racine, c'est-à-dire que d'autres éléments doivent être imbriqués dans l'élément racine. Les fichiers XML peuvent également contenir des commentaires et des définitions de types de documents.

3. Comment écrire des fichiers XML de diagramme à courbes multiples

Ce qui suit est un exemple de fichier XML de diagramme à courbes multiples :

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

Le fichier XML contient un élément racine <chart>, qui contient une balise <categories> et plusieurs balises <dataset>. La balise <categories> est utilisée pour définir l'échelle de l'axe X dans le graphique linéaire. Elle contient plusieurs balises <category>, chacune <category&gt. ;label de /code>label est le texte de l'étiquette de tick. La balise <dataset> est utilisée pour définir la série de données du graphique linéaire. Elle contient plusieurs balises <set>, chacune <set><.>L'attribut value de la balise est la valeur des données. La balise <dataset> possède également un attribut seriesName, qui est utilisé pour spécifier le nom de la série de données. <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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!