JavaScriptで複数の折れ線グラフ用のXMLファイルを作成する方法

データ視覚化の分野では、折れ線グラフが一般的な視覚化方法です。JavaScript の強力な機能と使いやすさのため、多くの人が JavaScript を使用して折れ線グラフを描画しています。 JavaScript では、XML ファイルをデータ ソースとして使用することも一般的な方法です。この記事では、JavaScriptで複数の折れ線グラフのXMLファイルを記述する方法を詳しく紹介します。

1. XML ファイルの定義

XML は、Extensible Markup Language (Extensible Markup Language) の略称です。 XML ファイルはタグで構成されるテキスト ファイルであり、タグをカスタマイズしてデータの構造と内容を記述することができます。 XML ファイルは、インターネット上でのデータ交換およびデータ保存の重要な方法です。

2. XML ファイルの構文

XML ファイルでは、一連のペアになったタグを使用して、データの構造とコンテンツを記述します。 XML タグは山括弧「 < > 」で囲まれており、通常は開始タグと終了タグに分けられます。開始タグの形式は「<タグ名>」、終了タグの形式は「」であり、開始タグと終了タグの間の内容がタグ内容となる。

XML ファイルでは、タグの間に他のタグを入れ子にしてツリー構造を形成できます。 XML ファイルにはルート要素を 1 つだけ含めることができます。つまり、他の要素はルート要素内にネストする必要があります。 XML ファイルには、コメントやドキュメント タイプの定義を含めることもできます。

3. 複数の折れ線グラフ 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> tag value属性はデータ値です。 <dataset> タグには、データ シリーズの名前を指定するために使用される seriesName 属性もあります。

4. 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 のタグを取得し、変数に保存します。

5. 複数の折れ線グラフを描画する

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 属性では、3 つのデータ シリーズを使用してそれぞれ売上、経費、利益を表し、sales の [].map.call() メソッドを使用します。 , expenses、profit 変数からデータを読み取ります。 Highcharts.chart()メソッドは、描画された折れ線グラフを表示するための HTML 要素をページに作成します。

6. 概要

この記事では、JavaScript で複数の折れ線グラフ用の XML ファイルを作成する方法を紹介し、XML ファイルからデータを読み取り、折れ線グラフを描画するためのサンプル コードを提供します。 XML ファイルを使用してデータの構造とコンテンツを記述すると、データがより構造化されて読みやすくなり、JavaScript によるデータの読み取りと解析が容易になります。折れ線グラフはデータを視覚化する一般的な方法であり、データをより直観的に理解するのに役立ちます。

以上がJavaScriptで複数の折れ線グラフ用のXMLファイルを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。