How to write xml files for multiple line charts in javascript

In the field of data visualization, line charts are a common visualization method. Due to the powerful capabilities and ease of use of JavaScript, many people use JavaScript to draw line charts. In JavaScript, using XML files as data sources is also a common way. This article will introduce in detail how to write XML files for multiple line charts in JavaScript.

1. Definition of XML file

XML is the abbreviation of Extensible Markup Language (Extensible Markup Language). XML files are text files composed of tags. Tags can be customized to describe the structure and content of the data. XML files are an important way of data exchange and data storage on the Internet.

2. The syntax of XML files

XML files use a series of paired tags to describe the structure and content of data. XML tags are surrounded by angle brackets " < > " and are generally divided into start tags and end tags. The format of the start tag is "", the format of the end tag is "", and the content between the start tag and the end tag is the tag content.

In XML files, other tags can be nested between tags, forming a tree structure. An XML file can only contain one root element, that is, other elements must be nested within the root element. XML files can also contain comments and document type definitions.

3. How to write multiple line chart XML files

The following is an example of a multiple line chart XML file:

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

The XML file contains a root element<chart>, which contains a <categories> tag and multiple <dataset> tags. <categories>The label is used to define the x-axis scale in the line chart. It contains multiple <category> labels, each <category> The label attribute of the label is the text of the tick label. The <dataset> tag is used to define the data series of the line chart, which contains multiple <set> tags, each <set> tag valueThe attribute is the data value. The <dataset> tag also has a seriesName attribute, which is used to specify the name of the data series.

4. Reading data from XML files

In JavaScript, you can use the XMLHttpRequest object to obtain XML data from the server, and use tools such as DOM (Document Object Model) or JQuery to parse the XML file . The following is a sample code:

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

In the above code, the loadXMLDoc() function uses the XMLHttpRequest object to obtain the XML file from the server and returns an XML DOM object. Then, get the tags in XML through the xmlDoc.getElementsByTagName() method and save them in variables.

5. Draw multiple line charts

After obtaining the data in the XML file, you can use JavaScript to draw multiple line charts. The following is a sample code that uses Highcharts.js to draw multiple line charts:

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

In the above code, the Highcharts.js library is used to draw multiple line charts. In the xAxis attribute, use the categories option to specify the x-axis scale of the line chart, its value is an array, use [].map.call() The method reads the value of the label attribute from the <category> label in the categories variable. In the series attribute, use three data series to represent sales, expenses and profits respectively, and use the [].map.call() method from sales, Read data from expenses, profit variables. Highcharts.chart()The method will create an HTML element in the page to display the drawn line chart.

6. Summary

This article introduces how to write XML files for multiple line charts in JavaScript, and provides sample code for reading data from XML files and drawing line charts. Using XML files to describe the structure and content of data can make the data more structured and readable, making it easier for JavaScript to read and parse the data. Line charts are a common way of visualizing data, which can help people understand data more intuitively.

The above is the detailed content of How to write xml files for multiple line charts in javascript. For more information, please follow other related articles on the PHP Chinese website!