サンプル:棒グラフ

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

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

サンプル:棒グラフ

このセクションでは、YearlySales.sps ファイルに含まれている 2D ならびに 3D の棒グラフ(スタックされた棒グラフとグループ化された 3D 棒グラフを含む)を取り上げます。この 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 のコンボボックスにて Bar Chart 2DBar Chart 3DBar Chart 3D Grouped、そして Bar Chart Stacked を順に選択して、それぞれ異なる種類のチャートを確認してください。

 

Click to expand/collapse

 

 

Bar Chart 2D ならびに Bar Chart 3D のページに表示される最初の3つのグラフでは、地域ごとの年間売上高が表示されます。個々の棒グラフがそれぞれ1つの地域を表しており、棒(の高さ)により、2005年から2010年までの年間売上が示されます(以下の 3D 棒グラフのスクリーンショットを参照ください)。

 

ChartExBarPerRegion

 

これらチャートのチャート設定を確認するには、デザインビューに切り替えた後に、最初の条件タグにて適切な分岐タグを選択し、チャートを右クリックしてチャート設定の編集を選択します。 チャート構成ダイアログが表示されます。

 

地域ごとの年間売上高グラフに関して、以下の点に注意してください:

 

1.チャートは Region 要素内に挿入されているため、コンテキストノードは Region 要素となります。そのため、XSLT エンジンにより Region 要素がイタレーションされるたびにグラフが作成されます。
2.各チャートのタイトル には、Region/@id 属性の値が含まれます。動的 XPath 設定ボタンをクリックして、どのような設定が行われているか確認することができます。.
3.必要な系列は1つだけなので、Z-軸または系列名の欄には入力を行いません。これでデフォルトの無名系列が作成されます。
4.X-軸により棒グラフの棒に使用されるラベルが選択され、この場合は 2005 から 2010 までが XPath 条件式の Year/@id により選択されます(以下のスクリーンショットを参照)。

 

ChartDataSelector

 

5.Y-軸により棒グラフの各棒に使用される値が選択されます。このグラフを使った例では、Y-軸の XPath 条件式から得られたシーケンス内部にあるアイテムの数が、表示される棒の数となります。この例で使用されている XPath 条件式では、Region 要素の子要素である Year 要素のコンテンツがアイテムのシーケンスとして返されます。垂直方向に表示される数値の大きさは、Y-軸に対して選択されたアイテムをベースに自動的に決定されます。
6.棒グラフに表示される棒の数は、 チャートデータセレクターのルール により決定されます。以下に示されるような選択が行われた場合、2011年の売上として60000という値を持った棒が追加されます。

 

ChartExPiePerRegionVar

 

7.X-軸に対して選択されたシーケンスのアイテムは、棒グラフに表示されるラベルと同じ順序で割り当てられます。
8.チャートデータセレクターペインにおける各データ選択行にて指定される X-軸と Y-軸のアイテム数は、等しくなっている必要があります(上のスクリーンショットを参照)。数が違っていてもエラーとはなりませんが、X-軸のアイテム数が Y-軸のそれより少ない場合、(対応する X-軸のアイテムを持たない)棒がラベルなしで棒グラフに表示されます。X-軸のアイテム数が Y-軸のそれよりも多い場合、これら X-軸のアイテムは無視されることになります。

 

系列軸を使ったグループ化された棒グラフとスタックされた棒グラフの生成

X-軸に年が記される場合、以下のスクリーンショットにあるように地域の棒を年ごとにグループ化したほうが見やすくなるでしょう。サンプルファイルでは、Bar Chart 2DBar Chart 3D にて表示される最後のグラフがこのような構成になっています(以下のスクリーンショットを参照)。Bar Chart 3D Grouped Page にあるグラフも、同様にグループ化されたグラフです。スタックされた棒グラフ ではグループ化された棒グラフと同様のデータ選択方法が使用されますが、その外観は違ったものになります。詳細については 以下の記述を参照ください。

 

ChartBar2DSeries

 

これらグラフにある棒グラフのグループ化は、Z-軸、または系列名軸により行われます。系列名軸では3つの地域が選択されます。地域の選択を行うには、Region 要素ではなく、それより1階層上にある Data 要素内部でチャートを作成し(上の XML ドキュメントを参照ください)、3つある Region 要素を選択のターゲットにすることができます。以下のスクリーンショットにある XPath 条件式により、3つの系列が選択されます。

 

ChartDataSelFlex03

 

年により地域のグループ化を行うためのポイントを以下に示します:

 

チャートのコンテキストノードは Region 要素から1階層上にある Data 要素となります。
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")。同様のことは系列軸についても言えます。

 

スタックされた棒グラフ

サンプルファイルの YearlySales.xml にて Bar Chart Stacked を選択することで表示される、スタックされた棒グラフでは、グループ化されたグラフと同様の方法によりデータ選択が行われます(以下のスクリーンショットを参照)。このグラフで使用されている軸は、上記のグループ化されたグラフと全く同じ方法で選択されていますが、棒のグループが隣り合わせでグループ化されているかわりに、個々のデータが積み重なるかたちで表示され、個々の X-軸の目盛りにて各系列のメンバーがX-軸にある1つの目盛り上に表示されます(以下のスクリーンショットを参照)。

 

ChartBarStacked

 

スタックされた棒グラフでは、複数のデータが分けられた様子を確認することができます。例えば、上にあるスクリーンショットでは、各地域の売上からなる棒により、その年における売上高の合計が表示されます。

 

 

 


(C) 2019 Altova GmbH