在数据可视化的领域中，折线图是一种常见的可视化方式，由于javascript的强大能力和易用性，许多人使用javascript来绘制折线图。在javascript中，使用xml文件作为数据源也是一种常见的方式。本文将详细介绍如何编写javascript中多条折线图的xml文件。
一、XML文件的定义
XML是可扩展标记语言（Extensible Markup Language）的缩写。XML文件就是由标记组成的文本文件，标签可以自定义，来描述数据的结构和内容。XML文件是互联网上数据交换和数据存储的重要方式。
二、XML文件的语法
XML文件使用一系列成对的标记来描述数据的结构和内容。XML标记由尖括号" < > " 包围，一般分为开始标记和结束标记。开始标记的格式为"<标记名>"，结束标记的格式为"</标记名>"，开始标记和结束标记之间的内容为标记内容。
立即学习“Java免费学习笔记（深入）”；
在XML文件中，标记之间可以嵌套另外的标记，这就形成了树形结构。一个XML文件只能包含一个根元素，即其他元素都要嵌套在根元素中。XML文件中还可以包含注释和文档类型定义。
三、多条折线图XML文件的写法
下面是一个多条折线图XML文件的例子：
<?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>该XML文件包含一个根元素<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()方法会在页面中创建一个HTML元素，用来显示绘制的折线图。
六、总结
本文介绍了JavaScript中多条折线图的XML文件的写法，并给出了从XML文件中读取数据和绘制折线图的示例代码。使用XML文件来描述数据的结构和内容可以使数据更有结构化和可读性，从而方便JavaScript读取和解析数据。折线图是一种常见的数据可视化方式，可以帮助人们更直观地理解数据。
