サンプル:エリアチャート

www.altova.com すべてを展開/折りたたむ このトピックを印刷 前のページ 1つ上のレベル 次のページ

ホーム >  SPS ファイル: コンテンツ > チャート >

サンプル:エリアチャート

SPS ファイルの YearlySales.sps 内に含まれているエリアチャートをこのセクションでは取り上げます。この SPS デザインは YearlySales.xsd XML スキーマをベースにしており、(以下のスクリーンショットにある)YearlySales.xml を作業用 XML ファイルとして使用しています。これらのファイルは、 (マイ) ドキュメントフォルダーC:\Documents and Settings\<username>\My Documents\Altova\StyleVision2019\StyleVisionExamples/Tutorial/Charts.

 

Click to expand/collapse listingXML file used in charts example: YearlySales.xml

 

<?xml version="1.0" encoding="UTF-8"?>

<Data xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 

      xsi:noNamespaceSchemaLocation="YearlySales.xsd">

 <ChartType>Pie Chart 2D</ChartType>

 <Region id="Americas">

         <Year id="2005">30000</Year>

         <Year id="2006">90000</Year>

         <Year id="2007">120000</Year>

         <Year id="2008">180000</Year>

         <Year id="2009">140000</Year>

         <Year id="2010">100000</Year>

 </Region>

 <Region id="Europe">

         <Year id="2005">50000</Year>

         <Year id="2006">60000</Year>

         <Year id="2007">80000</Year>

         <Year id="2008">100000</Year>

         <Year id="2009">95000</Year>

         <Year id="2010">80000</Year>

 </Region>

 <Region id="Asia">

         <Year id="2005">10000</Year>

         <Year id="2006">25000</Year>

         <Year id="2007">70000</Year>

         <Year id="2008">110000</Year>

         <Year id="2009">125000</Year>

         <Year id="2010">150000</Year>

 </Region>

</Data>

 

 

SPS ファイルを StyleVision で開いたら、Authentic プレビューに切り替え、Chart type のコンボボックスにて Area Charts を選択して下さい。通常のオーバーレイチャートとスタックされたエリアチャートが表示されます。

 

Click to expand/collapse

 

 

エリアチャートのデータを選択する

X-軸に年が表示され、Y-軸に売上高が表示されている場合、地域ごとの年間売上高を折り重なったエリアとしてプロットすることができます(以下のスクリーンショットを参照)。エリアチャートの選択は 種類の変更 ダイアログ にて行うことができます。他のエリアに対してオーバーレイしてしまうチャートは、 チャートの設定.のエリアオプションにて透明度の指定を行うべきでしょう。

 

 

ChartAreaStd

 

エリアチャートのデータ選択は、系列名に対して3つの地域の名前を選択することにより行われています。このような操作を行うには、Region 要素ではなく、それよりも上の階層にある Data 要素を選択し(上の XML ドキュメントを参照)、3つある全ての Region 要素を簡単に選択できるようにします。これら3つの軸を選択するための XPath 条件式を以下に示します。

 

ChartDataSelFlex03

 

このデータ選択において注意すべき点を以下に示します:

 

Region 要素よりも1階層上にある Data 要素がチャートのコンテキストノードとなります。
For-Each イタレーションは Region 要素にて作成されます。
Z-軸(系列名軸)により地域の名前 (Region/@id) が選択されます。
地域ごとの年間売上高を表している棒グラフと同様に、X-軸には年の名前 (Region/Year/@id) が、Y-軸には各年の売上(Region/Year 要素のコンテンツ)が表示されます。

 

上のデータ選択では、各 Region 要素に対して系列名(Region 要素の id 属性にある値)が選択され、(Year/@id 属性値から得られた順序に従い)Region の X-軸が生成されます。その後(Year 要素のコンテンツが得られた順序に従い)Y-軸の値を生成します。このような処理を3つの Region 要素に対して行うことで、上に示されるグラフが生成されます。

 

異なる軸で使われるデータの選択方法に関する詳細については、次のセクションを参照してください: チャートのデータ選択におけるルール.

 

以下のスクリーンショットで示されるデータ選択でも、同様の結果を得ることができます。このデータ選択では、各地域に対応する軸が個々に選択され、個々の地域が順に処理されます。2番目ならびに3番目の系列に使用される X-軸のアイテムは無視されるため、ダイアログボックスにあるこれらのフィールドは空欄にしておいたほうが良いでしょう。

 

ChartBar2DSeriesSplitUp

 

以下のスクリーンショットにあるような XPath 条件式を使用することでも同じデータを選択することができます。

 

ChartDataSelFlex02

 

X-軸のカラムにある条件式は、全てのデータ選択行で同じものになっています。XPath 条件式で選択されるデータアイテムは、目的のアイテムを含むシーケンスでなければならないことに注意してください。シーケンスは XPath 条件式に直接入力することもできます(例: "2005, 2006, 2007, 2008, 2009, 2010")。同様のことは系列軸についても言えます。

 

 


 

 

スタックされたエリアチャート

(以下のスクリーンショットに示される)スタックされたエリアチャートでは、標準的なオーバーレイエリアチャートと同様の方法でデータ選択が行われます。3つの軸は、上記の方法で選択されていますが、同じグリッドに複数のエリアが折り重なって表示される代わりに、Y-軸に対して各エリアは積み上げられる(スタックされる)かたちで表示されます(以下のスクリーンショットを参照)。

 

ChartAreaStacked

 

スタックされたエリアチャートでは複数のエリアを比較することができます。例えば、上のスクリーンショットにおいて、ある期間内における地域ごとのエリアサイズを比較することで、3つの地域(Americas、Europe、Asia)を比較することができます。チャート内にプロットされた Y-軸の値は、その年における系列の値に、その下に表示されている他系列の合計値を合わせたものであることに注目してください。例えば、2005年の Europe がプロットされる位置は 50,000 + 30,000 で 80,000 となり、2005年の Asia は、10,000 + 50,000 + 30,000 で 90,000 となります。

 

 

 


(C) 2019 Altova GmbH