Skip to main content

This is documentation for Caché & Ensemble. See the InterSystems IRIS version of this content.Opens in a new tab

For information on migrating to InterSystems IRISOpens in a new tab, see Why Migrate to InterSystems IRIS?

Zen のグラフ

この章では、Zen ページにグラフを配置する方法を説明します。“Zen と SVG” の章で説明しているように、すべてのグラフは SVG コンポーネントであり、%ZEN.SVGComponent.svgComponentOpens in a new tab クラスから派生しています。グラフは SVG コンポーネントの layout および style の規約に従いますが、さらにグラフ独自の動作も備えています。

Zen レポートのコールバック・グラフでは、Zen ページと同じ構文を使用してグラフを表示します。コールバック・グラフは %ZEN.Report.Display.COSChart パッケージ内で定義されており、グラフ要素名はすべて文字 “c” で始まります (<cbarChart> など)。“Zen レポートでのコールバック・グラフの使用法” を参照してください。“グラフのタイプ”、“グラフのレイアウト、スタイル、および動作”、および “グラフの軸” セクションで説明している構文は、Zen ページのグラフおよび Zen レポート内のコールバック・グラフに同様に当てはまります。XPath グラフは Zen レポートのグラフの古い実装であり、Zen ページとは異なる構文を使用します。“Zen レポートでの XPath・グラフの使用法” を参照してください。

Zen ページのグラフに対するデータの指定方法は、Zen レポートのコールバック・グラフと XPath グラフのどちらに対する指定方法とも異なります。このドキュメントの “Zen ページのグラフの値の指定” および "Zen レポートの使用法" の “Zen レポートのグラフの値の指定” を参照してください。

基本グラフ・クラスである %ZEN.SVGComponent.chartOpens in a new tab は、グラフで使用するデータ、グリッド (軸と目盛り)、スタイル、および凡例を定義します。グラフは 100 単位 × 100 単位の仮想座標空間を占有するものと考えることができます。内部的には、グラフはピクセル単位でプロットされるので、サイズおよび位置のパラメータを仮想座標空間の単位だけではなくピクセルでも指定できます。“サイズと位置の指定” を参照してください。グラフにより占有される全空間内に、より小さいプロット領域があり、グラフはここにデータをプロットします。プロット領域の周りの空間はマージンです。通常、このマージンはグラフのラベルや凡例を表示するために使用します。

この章はさまざまなタイプのグラフの紹介から始まります。これにより、特定のタイプのグラフの使用方法に関する詳しい説明を読む前に、グラフの例を実際に目で確認し、Zen ページに表示するアイテムについて検討できます。ここでは以下の項目について、この順番で説明します。

グラフのタイプ

ここでは、Zen ページに配置できるグラフのタイプについて説明します。個々の説明では、そのタイプのグラフを定義する固有の属性も扱います。すべてのグラフに共通の属性については、“Zen ページのグラフの値の指定” および “グラフのレイアウト、スタイル、および動作” を参照してください。

Zen には、以下の組み込みグラフ・タイプが用意されています。

棒グラフ

<barChart> では、1 つ以上のデータ系列を一連の縦棒または横棒として表示します。以下の図は、3 つのデータ系列からのデータを表示する Zen 棒グラフを示しています。

棒グラフ
generated description: svg barchart

<barChart> には以下の属性があります。

属性 説明
グラフの属性

<barChart> は、あらゆるグラフと同じ汎用属性を持ちます。詳細は、“Zen ページのグラフの値の指定” および “グラフのレイアウト、スタイル、および動作” を参照してください。plotToEdge 属性は、<barChart> では必ず False として扱われます。

<yAxis> の baseValue 属性は、棒の最下部をプロットするために使用します。詳細は、“グラフの軸” を参照してください。

chartStacked

True の場合、カテゴリ軸に沿った各位置にある棒は、互いに積み重ねられます (加算した値で表示されます)。“chartStacked” を参照してください。

endTime

timeBased x 軸の終了時刻。

showMultiples

True の場合、グラフは、データ系列ごとに 1 つの、複数の小さいグラフとして表示されます。“showMultiples” を参照してください。

startTime

timeBased x 軸の開始時間。

timeBased

x 軸が時間軸であることを指定します。“timeBased” を参照してください。

バブル・グラフ

<bubbleChart> は、データを x と y 座標に配置された円または “バブル” として表示します。2 つ以上のデータ系列が必要です。1 つ目の系列が x 値を、2 つ目の系列が y 値をそれぞれ提供します。2 つのデータ系列のみをグラフ化に使用した場合、<bubbleChart> は実際には <xyChart> です。<bubbleChart> では chartPivot はサポートされません。

3 つ目のデータ系列を指定すると、そのデータが各バブルの半径として使用されます。半径系列の値には、radius プロパティの値が乗じられ、スケーリングされます。

以下の図は、x、y、および半径データ系列を使用したグラフを示しています。既定のバブルの半透明性により、バブルが重なっている場合にも形状を確認できます。この特性は opacity プロパティにより制御します。この例では showQuadrant の値が True であるため、グラフ領域が四分区間に分割されていることにも注目してください。

半径データ系列
generated description: svg bubblechart radius

データ系列をさらに 2 つまで追加できます。4 つ目の系列はデータ・バブルに色がどのように適用されるかを決定し、5 つ目の系列はバブルの不透明度を制御します。

4 つ目、つまり色データ系列の値には任意のデータを使用できます。系列内で検出された新しい値ごとに色カテゴリが設定され、グラフ内の対応するバブルに色が割り当てられます。グラフには現在有効な色が使用されます。seriesColorsseriesColorScheme を参照してください。

以下のコード例は、色データ系列を設定する ongetData ハンドラの一部を示しています。

/// Callback to provide data for bubble chart.
ClientMethod getBubbleChartData(series) [ Language = javascript ]
{
  var chart = zenPage.getComponentById('chart');
  var data = new Array(chart.seriesSize);

  // ...code omitted...

  if (series == 3) // color
  {
    for (var i = 0; i < chart.seriesSize; i++) 
    {
      data[i] = (i%3)?"group 1":"group 2"
    }  
  }
  return data;
}

以下の図は、ランダムに生成されたデータに色が適用されたグラフを示しています。このグラフでは、showRegression の値が True であるため、計算された線形回帰線が表示されていますが、showQuadrant が False であるため、四分区間は表示されていません。線形回帰線のスタイルは、lineStyle プロパティで指定できます。

色データ系列
generated description: svg bubblechart color

5 つ目、つまり不透明度データ系列の値には任意のデータを使用できます。不透明度系列の値には、opacity プロパティの値が乗じられ、スケーリングされます。値は正規化されないため、値の範囲が広いと小さい値が 0 に近くなり、表示されない場合があります。

/// Callback to provide data for bubble chart.
ClientMethod getBubbleChartData(series) [ Language = javascript ]
{
  var chart = zenPage.getComponentById('chart');
  var data = new Array(chart.seriesSize);

  // ...code omitted...    

  if (series == 4) // opacity
   {
     data[1] = 1;
     data[2] = 4;
     data[3] = 1;
     data[4] = 1;
     data[5] = 4;
     data[6] = 1;
     data[7] = 4;
     data[8] = 4;
     data[9] = 4; 
   }
   return data;
}

以下の図は、ランダムに生成されたデータに不透明度が適用されたグラフを示しています。四分区間が xCenterValue プロパティを設定して変更され、四分区間の色は upperRightStyle プロパティと lowerLeftStyle プロパティを使用して変更されていることにも注意してください。

不透明度データ系列
generated description: svg bubblechart opacity

<bubbleChart> には以下の属性があります。

属性 説明
グラフの属性

<bubbleChart> は、あらゆるグラフと同じ汎用属性を持ちます。詳細は、“Zen ページのグラフの値の指定” および “グラフのレイアウト、スタイル、および動作” を参照してください。

lineStyle

線形回帰線に適用される SVG の CSS スタイル定義。

lowerLeftStyle

左下の四分区間の背景に適用される SVG の CSS スタイル値。

opacity

バブルに対する既定の不透明度 (0 ~ 1)。不透明度系列を指定した場合は、その値にこの値が乗じられてスケーリングされます。不透明度系列の値は正規化されません。

radius

バブルに対する既定の半径 (論理単位)。 半径系列を指定した場合は、その値にこの値が乗じられてスケーリングされます。

showQuadrant

True の場合、プロット領域は四分区間に分割され、右上と左下の四分区間に色が適用されます。既定値は True で、既定の色は、右上の四分区間に赤、左下の四分区間に緑です。

showRegression

True の場合、計算された線形回帰線が描画されます。

xCenterValue

背景の四分区間の描画時に使用する x 軸値。既定値は、x 軸の中心です。

yCenterValue

背景の四分区間の描画時に使用する y 軸値。既定値は、y 軸の中心です。

upperRightStyle

右上の四分区間の背景に適用される SVG の CSS スタイル値。

ブルズアイ・グラフ

<bullseyeChart> は、データ項目を同心円として表示します。

ブルズアイ・グラフ
generated description: svg bullseyechart

一般に、ブルズアイ・グラフは、大きな円がデータ・セット全体を示し、次の円が関連する条件のセットを満たすデータ項目を示し、次の円がその他の条件を満たすデータ項目を示します。例えば、最大の円で研究対象の患者の合計数を示し、次の円で糖尿病の患者を示し、最小の円で特定の治療を受けている糖尿病の患者を示します。

コンボ・グラフ

<comboChart> では、複数のデータ系列が、面グラフ、棒グラフ、および折れ線グラフを使用して 1 つのグラフに描画されます。以下の図では、3 つのグラフ・タイプがすべて表示されています。

面グラフ、棒グラフ、および折れ線グラフを表示したコンボ・グラフ
generated description: svg combochart abl

他のグラフ要素を使用して、1 つのグラフ・タイプで複数のデータ系列をプロットすることもできますが、<comboChart> にはいくつか利点があります。例えば、<lineChart> を使用して複数の塗りつぶし折れ線グラフを描画できますが、<comboChart> では面グラフを半透明で描画できるため、重なっている場合にもすべてのグラフ領域を確認できるので、より適しています。

4 つの面グラフを表示したコンボ・グラフ
generated description: svg combochart areas

seriesTypes 属性を使用して、データ系列のいずれかを目標ラインとして表示することもできます。以下の図は、4 番目のデータ系列が目標ラインを示すグラフを示しています。

目標ラインが表示されたコンボ・グラフ
generated description: svg combochart target

<comboChart> では、以下の属性がサポートされています。

属性 説明
グラフの属性

<comboChart> は、あらゆるグラフと同じ汎用属性を持ちます。詳細は、“Zen ページのグラフの値の指定” および “グラフのレイアウト、スタイル、および動作” を参照してください。

chartPivot

True の場合、グラフがピボットされます (カテゴリが縦軸、値が横軸に表示されます)。“chartPivot” を参照してください。

endTime

timeBased x 軸の終了時刻。

lineStyle

グラフの線に適用される SVG の CSS スタイル定義。

seriesTypes

グラフ内の対応する系列をどのように表示するかを指定する、タイプのコンマ区切りリスト。指定可能なタイプは “line”、“area”、“bar”、および “target” です。既定タイプは、bar です。

タイプが “target” の場合は、対応するデータ系列を使用してグラフに目標ラインを表示します。

面グラフは半透明で描画され、他のすべてのグラフ・タイプの背面に配置されます。折れ線グラフは、棒グラフの前面に描画されます。

startTime

timeBased x 軸の開始時間。

timeBased

x 軸が時間軸であることを指定します。“timeBased” を参照してください。

差異グラフ

<diffChart> は、2 つのデータ系列の差異に着目した特別なタイプの折れ線グラフです。

  1. 最初の系列では、一連の参照データ値を指定します。

  2. 2 つ目のデータ系列では、参照データ・セットと比較する値を指定します。

<diffChart> は、2 つ目のデータ系列に設定された色を使用して、2 つの系列に挟まれた領域を塗りつぶします。系列をさらに区別するために、塗りつぶされた領域の上に、参照側の系列を表す折れ線が描画されます。この線には最初の (参照) データ系列の色が使用され、refLineStyle 属性からの追加のスタイル設定が適用されます。<diffChart> では chartPivot はサポートされません。

以下の図は差異グラフの例です。

差異グラフ
generated description: svg diffchart

比較のため、以下の図は、塗りつぶし折れ線 (面) グラフと同じデータを示しています。

面グラフ
generated description: svg areachart

<diffChart> には以下の属性があります。

属性 説明
グラフの属性 <diffChart> は、あらゆるグラフと同じ汎用属性を持ちます。詳細は、“Zen ページのグラフの値の指定” および “グラフのレイアウト、スタイル、および動作” を参照してください。
refLineStyle

参照側系列の折れ線に設定する SVG の CSS スタイル定義。既定では、この線には参照 (1 番目) データ系列に割り当てた色が使用されますが、普通は refLineStyle を使用して、何らかのパターンも割り当てます。既定値は以下のとおりです。

stroke-dasharray: 1,1;

前の図の差異グラフでは以下のスタイルが使用されています。

stroke-dasharray: 2,2; stroke-width: 1%;

高低グラフ

高低グラフ
generated description: svg hilowchart

<hilowChart> は、株式市場の最高値、最安値、終値を表示する場合や、最大値と最小値の範囲と併せて測定値を追跡し、誤差の許容量を示す場合などに使用します。このグラフには、次の 3 つのデータ系列から作成されるバーが表示されます。

  1. 最大値 (最高値) は各バーの上限 (右端の値) を設定します。

  2. 最小値 (最安値) は各バーの下限 (左端の値) を設定します。

  3. (オプション) 終値。グラフの各バーの上に、この値を示すマーカが表示されます。

最小値はそれと対になる最大値よりも小さい値であること、また終値は対応する最小値と最大値の間の値であることが前提になっています。 このグラフでは、最初の seriesColors の値を使用して、すべてのバーとマーカがプロットされます。その他の系列に指定された色は無視されます。

<hilowChart> には以下の属性があります。

属性 説明
グラフの属性 <hilowChart> は、あらゆる Zen グラフと同じ汎用属性を持ちます。詳細は、“Zen ページのグラフの値の指定” および “グラフのレイアウト、スタイル、および動作” を参照してください。plotToEdge 属性は、<hilowChart> では必ず False として扱われます。
chartPivot

True の場合、グラフがピボットされます (カテゴリが縦軸、値が横軸に表示されます)。“chartPivot” を参照してください。

invertedBarStyle

SVG の CSS スタイル定義。価値の高い値が低い値よりも小さい場合のバーに使用されるスタイルを指定します。

折れ線グラフ

<lineChart> では、折れ線のセットとして、1 つ以上のデータ系列を表示します。以下の図は単純な折れ線グラフの例です。

折れ線グラフ
generated description: svg linechart

<lineChart> には以下の属性があります。

属性 説明
グラフの属性 <lineChart> は、あらゆるグラフと同じ汎用属性を持ちます。詳細は、“Zen ページのグラフの値の指定” および “グラフのレイアウト、スタイル、および動作” を参照してください。
chartFilled

True の場合、各折れ線の下の領域が面グラフのように塗りつぶされます。False の場合、折れ線グラフと同様、塗りつぶされません。

この属性で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。“Zen 属性のデータ型” を参照してください。

chartPivot

True の場合、グラフがピボットされます (カテゴリが縦軸、値が横軸に表示されます)。“chartPivot” を参照してください。

chartStacked

True の場合、カテゴリ軸に沿った各位置にある棒は、互いに積み重ねられます (加算した値で表示されます)。“chartStacked” を参照してください。

endTime

timeBased x 軸の終了時刻。

lineStyle

グラフの線に適用される SVG の CSS スタイル定義。この属性で指定された色は、seriesColors で指定した色より優先されます。

showMultiples

True の場合、グラフは、データ系列ごとに 1 つの、複数の小さいグラフとして表示されます。“showMultiples” を参照してください。

startTime

timeBased x 軸の開始時間。

timeBased

x 軸が時間軸であることを指定します。“timeBased” を参照してください。

百分率棒グラフ

<percentbarChart> では、各データ系列をグラフの棒として表示します。各棒の高さは同じで、系列の値の 100% を表します。棒内の帯は系列内の項目を表し、各帯のサイズは全体に対する各項目の割合に比例します。このようにデータ系列を処理する方法は plotBy="both" の場合の <pieChart> に似ていますが、円グラフでは各系列の相対割合も示される点が異なります。“項目別円グラフ” を参照してください。

ongetLabelX を使用して棒のラベルを指定し、seriesNames を使用して凡例のラベルを指定し、系列内の順序に従って名前を色と一致させることができます。

百分率棒グラフ
generated description: svg percentbarchart

<percentbarChart> には以下の属性があります。

属性 説明
グラフの属性

<percentbarChart> は、あらゆるグラフと同じ汎用属性を持ちます。詳細は、“Zen ページのグラフの値の指定” および “グラフのレイアウト、スタイル、および動作” を参照してください。

chartPivot

True の場合、グラフがピボットされます (カテゴリが縦軸、値が横軸に表示されます)。“chartPivot” を参照してください。

円グラフ

円グラフでは 1 つまたは複数のデータ系列をプロットでき、系列、または系列内の項目、あるいはその両方を表示できます。<pieChart> では、折れ線グラフや棒グラフとは異なり、軸やプロット領域内のグリッドはサポートされていません。

単一のデータ系列内の項目をプロットする <pieChart> では、系列内の項目を表す複数の扇形から構成される円が表示されます。各扇形のサイズは、全体に対するその項目の割合に比例して調整されます。エンド・ユーザがブラウザ内でクリックしてドラッグする操作で円グラフを回転できることに注意してください。

1 つのデータ系列を持つ円グラフ
generated description: svg piechart1series

<pieChart> には以下の属性があります。

属性 説明
グラフの属性 <pieChart> は、あらゆる Zen グラフと同じ汎用属性を持ちます。詳細は、“Zen ページのグラフの値の指定” および “グラフのレイアウト、スタイル、および動作” を参照してください。
holeSize

円グラフの中心に穴を表示するかどうか、また表示する場合は穴のサイズを制御します。このプロパティの値は、x 軸に沿ったグラフの半径の割合になります。グラフのサイズが変わっても、中心の穴の相対的なサイズは維持されます。

値の範囲は 0 ~ 0.9 です。0.9 より大きい値を指定しても、効果は同じです。既定値は 0 です。

pieHeight 3 次元円グラフの見かけの高さを制御します。このプロパティの値は、x 軸に沿ったグラフの半径の割合になります。グラフのサイズが変わっても、高さの相対的なサイズは維持されます。値の範囲は 0 ~ 1 です。既定値は 0.33 です。
pieScale グラフを構成する扇形のサイズに適用する表示倍率を表す小数値。既定の倍率は 1.0 です。値が 1.0 よりも大きいと、扇形はプロット領域に比べて大きくなります。1.0 よりも小さい場合、扇形はプロット領域より小さくなります。
plotBy 円グラフでどのようにデータをプロットするかを指定します。指定できる値は "items"、"series"、"both"、または "auto" です。既定は "auto" です。“plotBy” を参照してください。
rotateBy 指定された場合、円グラフをこの角度分、回転させます。
showMultiples

True の場合、グラフは、データ系列ごとに 1 つの、複数の小さいグラフとして表示されます。“showMultiples” を参照してください。

showPercentage

True の場合、データが占める比率 (最も近い整数に丸められたパーセント値) が扇形のラベルの一部として表示されます。既定値は False です。

この属性で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。“Zen 属性のデータ型” を参照してください。

plotBy

<pieChart> の plotBy 属性は、指定したデータから円グラフをどのように生成するかを制御します。<pieChart> では、実際には複数の系列を指定できます。このグラフでは、すべてのデータ系列を処理して 1 つの系列を作成してから、この系列をグラフ内の扇形として表示します。plotBy のオプションは以下のとおりです。

  • "items" – このグラフのデータ内の各項目に対して 1 つの扇形をプロットします。

  • "series" – このグラフのデータ内の各データ系列に対して 1 つの扇形をプロットします。

  • "both" – 各データ系列内の各項目に対して 1 つの扇形をプロットします。つまりグラフは、seriesCount × seriesSize 個の扇形から構成されます。

  • "auto" – 存在するデータ系列と項目の数に基づいて、データの表示に最適な方法が自動的に選択されます。

項目別円グラフ

plotBy の値が "items" の場合、<pieChart> ではデータ系列にある項目 1 つに対して 1 つの扇形がプロットされます。 "items" の円グラフで複数のデータ系列を指定すると、円グラフの扇形はそれぞれ、グラフにあるデータ系列すべてを通じて特定項目の値を合算した値を表します。

次の概念図は、1 系列あたり 6 個の項目を含むデータ系列が 3 つある場合に、どのように 6 個の扇形を持つ円グラフが生成されるかを表しています。扇形はそれぞれ、3 つの系列に指定された項目の値を合計した値を表します。

Zen による項目別円グラフのプロット
generated description: svg piechart items

plotBy の値が "items" の場合、扇形のラベルは <yAxis> ラベルとして扱われます。したがって、seriesNames などのグラフ属性を使用して、ラベルを直接指定することはできません。%ZEN.Auxiliary.dataControllerOpens in a new tab がある場合は、これによりラベルが指定されます。また、onGetLabelY イベント・ハンドラを使用して、ラベルの値を取得することもできます。

系列別円グラフ

plotBy の値が "series" の場合、複数の系列が使用されています。<pieChart> では、データ系列 1 つにつき扇形が 1 つプロットされるので、円グラフを構成する扇形の数は seriesCount になります。個々の扇形は、系列の 1 つに属するすべての項目の合計値を表します。seriesNames 属性は、扇形と凡例で使用されるラベルを表します。

次の概念図は、1 系列あたり 6 個の項目を含むデータ系列が 3 つある場合に、どのように 3 個の扇形を持つ円グラフが生成されるかを表しています。個々の扇形は、その系列に属する 8 個の項目の合計を表します。

Zen による系列別円グラフのプロット
generated description: svg piechart series
項目および系列の両方を基準にした円グラフ

plotBy の値が "both" の場合、複数の系列が使用されています。<pieChart> では、各データ系列の各項目について 1 つの扇形がプロットされます。したがって、seriesCountseriesSize を掛けることにより、プロットされる扇形の数が求められます。個々の扇形の基本色は、対応する系列の色になります。隣り合う扇形には、同じ色の濃いものと薄いものが交互に使用されます。グラフの凡例には系列名が表示されますが、このラベルは seriesNames 属性で指定します。扇形には項目名が表示されます。このラベルは onGetLabelY イベント・ハンドラ、またはデータ・コントローラで指定します。

次の円グラフの例では、3 つの系列 (Products、Services、および Training) を比較しています。これらの系列にあるデータ項目は、4 つのカテゴリ (America、Asia、Europe、および Africa) に分類されています。このグラフは 12 個の扇形で構成されています。

項目と系列の両方を含む Zen の円グラフ
generated description: svg piechart both

散布図

XY グラフまたは散布図
generated description: svg xychart

<xyChart> には、複数のデータ系列が (x,y) 座標の点としてプロットされます。このタイプのグラフは散布図とも呼ばれ、系列の生データの分布を表すために使用します。<xyChart> では、データ系列は以下のように表されます。

  1. 最初のデータ系列では x 値を指定します。

  2. 2 つめのデータ系列では、x 値と関連付ける y 値を指定します。

  3. それ以外のデータ系列は、最初の系列で指定した x 値と関連付ける別の y 値としてプロットします。

したがって、<xyChart> のプロット数は、データ系列の数より必ず 1 つ少なくなります。

<xyChart> には固有の属性がありません。<xyChart> は、あらゆる Zen グラフと同じ汎用属性を持ちます。詳細は、“Zen ページのグラフの値の指定” および “グラフのレイアウト、スタイル、および動作” を参照してください。<xyChart> では、markersVisibleplotToEdge は常に True に設定されています。通常、目的どおりの結果を得るには、このグラフ属性以外のグラフ属性をいくつか操作する必要があります。以下はその例です。

  • seriesCount には、表示するプロット数よりも 1 つ多い値を設定する必要があります。これにより、最初の値である x 値系列を扱うことができます。

  • この最初のデータ系列はプロットされないので、<xyChart> では、系列の設定は最初の系列ではなく、2 番目の系列から適用されます。以下はその例です。

    • seriesColors リストは、2 番目以降の系列に適用されます。

    • seriesNames リストは、2 番目以降の系列に適用されます。

    • markerShapes リストは、2 番目以降の系列に適用されます。

  • 散布図では、マーカとマーカの間の線を非表示にしなければ、“散布” しているようには見えません。このためには、以下のように、<xyChart> の plotStyle を設定します。

    plotStyle="stroke:none;".一部の SVG 実装では、stroke-width が 0 に設定されている場合でも非常に細い線が描画されるため、これは plotStyle="stroke-width: 0;" と設定するよりも優れた方法です。

<xyChart> には以下の属性があります。

属性 説明
グラフの属性

<xyChart> は、あらゆるグラフと同じ汎用属性を持ちます。詳細は、“Zen ページのグラフの値の指定” および “グラフのレイアウト、スタイル、および動作” を参照してください。

chartPivot

True の場合、グラフがピボットされます (カテゴリが縦軸、値が横軸に表示されます)。“chartPivot” を参照してください。

independentXSeries

False の場合、最初のデータ系列がグラフの x 値を提供し、その他すべてのデータ系列が y 値を提供します。

True の場合、グラフには複数の x 系列が表示されます。この場合、最初のデータ系列が x 値の最初のセットを提供し、2 つ目のデータ系列が y 値の最初のセットを提供し、3 つ目のデータ系列が x 値の 2 つ目のセットを提供するというようになります。

このプロパティはオプションであり、既定値は False です。

この属性で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。“Zen 属性のデータ型” を参照してください。

ツリー・マップ・グラフ

ツリー・マップ・グラフ
generated description: svg treemapchart

<treeMapChart> は、単一のデータ系列内の項目をプロットし、系列内の各項目を四角形で表し、それらを大きな四角形に配置します。小さな各四角形のサイズは、全体に対するその項目の割合に比例して調整されます。showMultiples を True に設定すると、複数のデータ系列を表示できます。複数のグラフのそれぞれに各データ系列が表示されます。

属性 説明
グラフの属性

<xyChart> は、あらゆるグラフと同じ汎用属性を持ちます。詳細は、“Zen ページのグラフの値の指定” および “グラフのレイアウト、スタイル、および動作” を参照してください。

showMultiples

True の場合、グラフは、データ系列ごとに 1 つの、複数の小さいグラフとして表示されます。“showMultiples” を参照してください。

Zen ページのグラフの値の指定

グラフのデータは 1 つ以上のデータ系列で構成されます。グラフに使用するデータ系列は、単なる数値の配列です。Zen ページのグラフのデータを指定する方法には次の 2 とおりがあります。

データを取得するためにグラフで使用するテクニックに関係なく、その結果として返されるデータを必要な系列の数とサイズに制限できます。

Zen レポートのコールバック・グラフと Zen ページは、同じ構文を使用してグラフを表示します。コールバック・グラフは %ZEN.Report.Display.COSChart パッケージ内で定義されています。

グラフを表示する場合、Zen ページおよび Zen レポートでは同じ構文を使用します。前述の “グラフのタイプ”、後述の “グラフのレイアウト、スタイル、および動作” および “グラフの軸” の構文は、いずれも Zen ページおよび Zen レポートに同様に適用されます。ただし、データの指定方法は、Zen レポートと Zen ページで異なります。詳細は、"Zen レポートの使用法" の “Zen レポートのグラフの値の指定” を参照してください。

Zen ページでグラフのデータを指定するには、このセクションのトピックに従ってください。

JavaScript メソッドの使用

グラフ・データを生成する ongetData 属性はすべてのグラフでサポートされています。

属性 説明
ongetData

次の場合にいつでも Zen から呼び出されるクライアント側 JavaScript 式。

  • グラフを初めて表示するとき

  • グラフの updateChart メソッドを呼び出したとき

以下はその例です。

ongetData="return zenPage.getChartData(series);"

Zen レポートでは、ongetData は ObjectScript またはその他の適切な言語で記述されたサーバ側メソッドです。

ongetData 式は、ページ・クラスで定義されたクライアント側 JavaScript メソッドを呼び出します。このメソッドは、グラフの ongetData イベント・ハンドラになります。グラフは、seriesCount で指定されたデータ系列ごとに ongetData イベント・ハンドラを呼び出します。イベント・ハンドラは、引数を 1 つ (series) 受け取ります。この引数は、現在処理されているデータ系列を指定します。series の値は、現在のデータ系列の順序数 (先頭は 0) です。指定できる値は、0 ~ seriesCount - 1 の範囲です。

また、イベント・ハンドラは、データ系列の値の数も把握する必要があります。この値は、グラフの seriesSize 属性によって設定されます。この説明の後のサンプル・コードでは、この線はグラフから seriesSize の値を取得します。

var data = new Array(chart.seriesSize);

メソッドは、seriesSize - 1 の項目を配列に配置し、配列を返します。グラフのデータを提供するための適切な方法を使用できます。例えば、series 入力引数の値に基づくスイッチ文を使用できます。

以下は、テスト用としてランダムな値を提供する ongetData イベント・ハンドラのサンプルです。このイベント・ハンドラは、テンプレート・ページ・クラス ZENTest.SVGChartTestOpens in a new tabSAMPLES ネームスペースにあります。これは、SVGLineChartTestSVGBarChartTest など、ZENTest.SVGChartTestOpens in a new tab テンプレートを拡張したページ・クラスによって描画されるグラフのデータを指定します。


ClientMethod getChartData(series) [ Language = javascript ]
{
  var chart = zen('chart');
  var data = new Array(chart.seriesSize);
  var value = 50;

  for (var i = 0; i < chart.seriesSize; i++) {
    if (Math.random() > 0.9) {
      value += (Math.random() * 50) - 35;
    }
    else {
      value += (Math.random() * 20) - 9;
    }
    data[i] = value;
  }
  return data;
}

前述の例は、ランダム・データでグラフを作成します。

通常は、サーバから得た実データを使用してグラフを作成します。一般には、サーバ側メソッドはリストを返します。クライアント側では、このリストはデータを表示するグラフ・コンポーネントで使用します。次の例では、これを実現する方法の 1 つを示しています。

  1. サンプル・ページが初めて表示されると、このページの %OnAfterCreatePage メソッドは PopulateData() というサーバ側メソッドを呼び出して、Population というページ・プロパティ内に値を配置して、後でクライアント側コードがこれらの値を使用できるようにします。この例では、この操作は、%OnAfterCreatePage の呼び出し時に 1 回だけ実行されます。その後のユーザ・アクションによってこのデータの表示方法を変更できますが、この例では、データをサーバから 1 回だけ取得します。

    Method %OnAfterCreatePage() As %Status
    {
      // Get the data while we're on the server
      Set sc = ..PopulateData()
    
      // Set the initial series size programmatically
      Set chart = %page.%GetComponentById("chartPop")
      Set chart.seriesSize = $Length(..States,",")
      Quit sc
    }
    
  2. Population プロパティは、ここでのページ・クラスでは次のように定義されています。

    Property Population As %ZEN.Datatype.list(DELIMITER = ",");
    

    サーバ側メソッド PopulateData() は、値とコンマ区切り記号を Population リスト内に次のように配置します。手順 3 では、ここで参照されている GetCountByState() クラス・クエリの内部構造を示しています。

    Method PopulateData() As %Status
    {
      Try {
        Set sc = $System.Status.OK()
        
        // Get a resultset containing population by state
        Set sc = ##class(SimpleZenChart.Person).GetCountByState(.rs)
        Quit:$System.Status.IsError(sc)
        
        // Populate the page properties with comma delimited values
        While (rs.%Next()) {
          Set ..Population = ..Population _ rs.%Get("PersonCount") _ ","
          Set ..States = ..States _ rs.%Get("HomeState") _ ","
        }
      
        // Remove trailing delimiter
        Set ..Population = $Extract(..Population,1,*-1)
        Set ..States = $Extract(..States,1,*-1)
      }
      Catch(ex) {
        Set sc = ex.AsStatus()
      }
      Quit sc
    }
    
  3. 上記の抜粋内容からわかるように、PopulateData() は、SimpleZenChart.Person で定義されたクラス・クエリを呼び出して、Population リストの作成時に使用する結果を取得します。GetCountByState() メソッドの内容は次のようになります。

    ClassMethod GetCountByState(Output Results As %SQL.StatementResult) As %Status
    {
      Try {
        Set sc = $System.Status.OK()
        
        // Make a new SQL statement
        // Use an array to create the query text (this is not required)
        // Pass in schema search list into statement constructor
        Set statement = ##class(%SQL.Statement).%New(,"SimpleZenChart")
        Set query = 4
        Set query(1) = "SELECT HomeState, COUNT(ID) As PersonCount"
        Set query(2) = "FROM Person"
        Set query(3) = "GROUP BY HomeState"
        Set query(4) = "ORDER BY HomeState"
        
        // Prepare query
        Set sc = statement.%Prepare(.query)
        Quit:$System.Status.IsError(sc)
        
        // Execute query
        Set Results = statement.%Execute()
        
        // Check %SQLCODE for an error
        If (Results.%SQLCODE < 0) {
          Set sc = 
            $System.Status.Error($$$GeneralError,
            "Error in %Execute. %SQLCODE = "
            _Results.%SQLCODE_" Error message = "_Results.%Message)
          Quit
        }
      }
      Catch (ex) {
        Set sc = ex.AsStatus()
      }
      Quit sc
    }
  4. サンプル・ページ上のグラフが更新されるたびに (ページが初めて表示されるときを含む)、そのグラフは ongetData の式を参照して、そのグラフ自体にデータを入力するためにどのクライアント側メソッドを呼び出す必要があるのかを確認します。次の抜粋内容では、このグラフは <barChart> であり、このクライアント側メソッドは getData() です。

    <barChart 
              id="chartPop" width="100%" height="100%" 
              selectedItemStyle="fill:rgb(255,0,255);" seriesCount="1"
              appearance="2D"
              title="Population By State"
              ongetData="return zenPage.getData(series);" 
              ongetLabelX="return zenPage.getXLabels(value);"
              onelementClick="zenPage.onSelectElement(zenThis);">
       <xAxis title="States"/>
     </barChart>
  5. サンプルのクライアント側メソッド getData() は、クライアント側ページ・オブジェクトの Population プロパティを参照して、そのプロパティに格納された値のリストを取得します。Population はページ・クラス内で %ZEN.Datatype.listOpens in a new tab 型として定義されていたため、getData() は、Population を JavaScript 配列として自動的に認識します。このため、変換は不要です。getData() は、その戻り値としてこの配列を返します。

    ClientMethod getData(series) [ Language = javascript ]
    {
      try {
        var data = zenPage.Population;
        return data;
      }
      catch (ex) {
        zenExceptionHandler(ex,arguments);
      }
    }
    
  6. <barChart> は、getData() によって返された JavaScript 配列内の値を使用して、その表示内容を更新します。

  7. この例では、他の便利な機能をいくつか実装しています。例えば、棒グラフ内の棒をクリックすると、<barChart> の onelementClick 属性で指定されたクライアント側メソッドが発行されます。この例では、このクライアント側メソッドは onSelectElement() です。このメソッドは、JavaScript ユーティリティ関数 zenSetProp() を使用して、ページ上の他のコンポーネントのいくつかを検索してから、getData() などのクライアント側メソッドから取得したデータを使用して、これらのコンポーネントのコンテンツを変更します。

    ClientMethod onSelectElement(chart) [ Language = javascript ]
    {
      try {
        var selected = chart.getProperty('selectedItem')
        
        // Set the population and count for the item
        zenSetProp('htmlState','content',this.getXLabels(selected));
        zenSetProp('htmlCount','content',(this.getData())[selected]);
      }
      catch (ex) {
        zenExceptionHandler(ex,arguments);
      }
    }
    
  8. 上記の抜粋内容では、クライアント側メソッド onSelectElement() は、棒グラフで現在選択されている棒の数を、getData() によって返される配列のインデックスとして使用します。getXLabels() は JavaScript 配列のインデックスも使用しますが、この場合は、この配列はページのプロパティ States であり、このプロパティには、この例で保管される人口統計が属する州のリストが格納されています。States プロパティはページ・クラス内で %ZEN.Datatype.listOpens in a new tab 型として定義されていたため、getXLabels() は、States を JavaScript 配列として自動的に認識します。このため、変換は不要です。

    ClientMethod getXLabels(value) [ Language = javascript ]
    {
      try {
        var data = zenPage.States
        return data[value];
      }
      catch (ex) {
        zenExceptionHandler(ex,arguments);
      }
    }
    
  9. この例で注目すべき最後のアイテムは、どのデータも変更または再送信することなくグラフの系列サイズを変更するものです。クライアント側メソッド changeSeriesSize() は、棒グラフと同じページ上のリスト・ボックスでいずれかの項目をユーザが選択したときに呼び出されます。このリスト・ボックスは次のように定義されています。

    <listBox id="lbSeriesSize" 
             label="Select Series Size" 
             value="5" 
             onchange="zenPage.changeSeriesSize(zenThis);">
      <option text="10"/>
      <option text="20"/>
      <option text="30"/>
      <option text="40"/>
      <option text="50"/>
    </listBox> 
  10. クライアント側メソッド changeSeriesSize() は、選択された <option> の text 値を使用し、この値を使用して idchartPop である <barChart> の seriesSize 値をリセットします。これは手順 4 で示しているサンプルの <barChart> です。seriesSize がリセットされると、グラフは再表示されます。

    ClientMethod changeSeriesSize(listbox) [ Language = javascript ]
    {
      try {
        // Get selected index and compute value
        var selected = listbox.getProperty('selectedIndex');
        var value = listbox.getOptionText(selected);
        
        // Set the series size in the chart
        zenSetProp('chartPop','seriesSize',value);
      }
      catch (ex) {
        zenExceptionHandler(ex,arguments);
      }
    }
    

データ・コントローラの使用

モデル・ビュー・コントローラ” の章で説明しているように、すべてのグラフでは、データ・コントローラのビューにグラフを関連付ける以下の属性をサポートしています。“ ”

属性 説明
controllerId このグラフのデータを指定するデータ・コントローラを表します。controllerId の値は、その <dataController> に指定した id 値と一致している必要があります。
onnotifyView

<chart> の onnotifyView イベント・ハンドラ。この属性は、グラフがデータ・コントローラに関連付けられている場合に適用されます。このグラフに接続されたデータ・コントローラがイベントを発生するたびに、Zen によってこのハンドラが呼び出されます。“Zen コンポーネントのイベント・ハンドラ” を参照してください。

XData Contents ブロックに、次のような <dataController> 参照があるとします。

<dataController id="source" modelClass="myPackage.MyModel" modelId="1"/>

この場合は、XData Contents ブロックに以下のようなグラフ定義を記述することもできます。

<pieChart id="myChart" controllerId="source"
          height="300" width="300"
          title="Pie Chart" titleStyle="fill: black;"
          backgroundStyle="fill: #c5d6d6;"
          plotAreaStyle="fill: white;"
          labelStyle="fill: black;"
          legendVisible="true" legendX="83" legendY="8"
          legendHeight="" legendWidth="15" >
</pieChart>

このグラフの controllerId の値は、<dataController> の id の値に一致している必要があります。グラフの seriesSize は、<dataController> の modelClass が持つプロパティの数になります。

データ・セットの制限

グラフの作成で使用する系列の数と、各データ系列に属する項目の数は、ベース・クラス %ZEN.SVGComponent.chartOpens in a new tab にある以下の属性により決まります。これらの属性は、すべてのタイプのグラフでサポートされています。データ・セットを提供する際に dataController を使用しない場合は、seriesCountseriesSize の両方を指定する必要があります。dataController を使用する場合は、Zen によってデータから系列数が算出されます。

属性 説明
seriesCount グラフの系列数を指定する正の整数。dataController を使用しない場合、データ・ソースに、使用するよりも多くの系列があるときには、seriesCount に設定する値を小さくすることで、表示する系列の数を少なくすることができます。以下の図は、seriesCount のアクションを示しています。
seriesSize 各データ系列で、このグラフに表示する項目数を表す正の整数。dataController を使用しない場合、データ・ソースに、使用するよりも多くの項目が系列内にあるときには、seriesSize に設定する値を小さくすることで、表示する項目の数を少なくすることができます。以下の図は、seriesSize のアクションを示しています。
データ系列の数とサイズ
generated description: data source

グラフのレイアウト、スタイル、および動作

以下の図は、Zen グラフの主なコンポーネントを示しています。以下のセクションで説明するグラフのプロパティは、これらのコンポーネントの配置、スタイル、および動作を制御します。

グラフのプロパティには、SVG コンポーネント・クラス %ZEN.SVGComponent.svgComponentOpens in a new tab に属するもの (widthheight など)、および基本グラフ・クラス %ZEN.SVGComponent.chartOpens in a new tab に属するもの (marginTopborderOffset など) があります。

Zen グラフのレイアウト属性
generated description: chart geography

ベース・クラス %ZEN.SVGComponent.chartOpens in a new tab が提供する多数の属性を適用して、Zen のグラフでは以下のような詳細を制御できます。

  • レイアウトやスタイル” — 背景の相対サイズや特性

  • プロット領域” — グラフ上のデータが表示される部分

  • マーカ” — 連続したプロット上で、正確なデータ・ポイントを強調するシェイプ

  • 凡例” — グラフにプロットされているものがそれぞれ何を表しているかを示した一覧

  • タイトル” — グラフ、およびグラフ上の項目のラベルとなるテキスト

  • ユーザ選択” — マウス・クリックなどのユーザ・アクションに対するグラフの反応

  • グラフ軸” — 大半のグラフを定義する 2 本の軸の特性

サイズと位置の指定

プロパティの状態に関する具体的な説明がない場合は、以下のいずれかの方法でサイズと位置を指定するプロパティの値を指定できます。

  • 値を指定せずに、Zen で値を自動的に計算する。

  • 現在のグラフのサイズのパーセンテージとして解釈される 0 ~ 100 の値を使用する。

  • 長さの値と単位を指定する。例えば、"10px" は、グラフのサイズに関係なく、マージンを 10 ピクセルにすることを示します。

レイアウトとスタイル

グラフの背景スタイルとプロット領域の位置は、ベース・クラス %ZEN.SVGComponent.chartOpens in a new tab の以下の属性で決まります。

グラフのレイアウト属性とスタイル属性
属性 説明
SVG コンポーネントの属性 グラフは、あらゆる SVG コンポーネントと同じ属性を持ちます。詳細は、“Zen と SVG” の章の “SVG コンポーネントの属性” を参照してください。
backgroundStyle SVG の CSS スタイル定義。背景パネルのスタイルを指定します。これはプロット領域外の領域ですが、コンポーネントの heightwidth の内側にあります。
borderOffset

SVG の CSS スタイル定義。背景の四角形と境界線の間の距離をピクセル単位で指定します。既定値は 8 です。

borderRadius

グラフの背景の四角形と境界線の角を丸めるために使用する半径を指定します。

borderStyle

SVG の CSS スタイル定義。グラフの外側の端から挿入する境界線で使用するスタイルを指定します。

hasZoom

True の場合は、特定のタイプのグラフでズームイン/ズームアウト・ボタンを表示します。既定値は、false です。scrollButtonStyle プロパティは、ボタンの外観を制御します。

marginBottom

背景の下端からプロット領域の下端までの余白。通常、軸のラベルやグラフの凡例はこのスペースに表示されます。値は “サイズと位置の指定” で指定した方法で指定できます。

marginLeft このテーブル内の marginBottom を参照してください。
marginRight このテーブル内の marginBottom を参照してください。
marginTop このテーブル内の marginBottom を参照してください。

プロット領域

プロット領域内のグラフ、およびプロット領域の境界となる座標軸の表示規約は、ベース・クラス %ZEN.SVGComponent.chartOpens in a new tab の以下の属性で決まります。“グラフの軸” も参照してください。

属性 説明
appearance

このグラフの外観を制御します。値 "2D" は標準の 2 次元のグラフ外観を指定します。値 "3D" は、プロット領域がくぼんで見えるような 3 次元のグラフ外観を指定します。棒グラフなどの特定のグラフ・タイプでは、項目が 3 次元的に表示されます。円グラフでは、このプロパティを "3D" に設定すると、円グラフが 3 次元的に表示されますが、プロット領域には影響しません。既定値は、一部のグラフについては "2D" であり、その他のグラフについては "3D" です。

autoScaleText

グラフのサイズ変更時にテキスト要素がどのように処理されるかを指定します。True の場合、テキストはグラフに比例して拡大縮小され、要求されたすべてのラベルが読みやすさに関係なく描画されます。False の場合、テキスト要素のサイズはページに対して固定され、すべての値を描画するために十分なスペースがグラフ上になければ、視覚的な重なりを防ぐために一部のラベルは省略されることがあります。

この属性で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。“Zen 属性のデータ型” を参照してください。

axisLineStyle x 軸および y 軸を描画する線に適用される SVG の CSS スタイル定義 (オプション)。
axisTitleStyle 軸の title プロパティによって指定されるタイトルに適用される SVG の CSS スタイル定義 (オプション)。
bandLower 10 進数値。この値を定義すると、プロット領域でこの値よりも小さい範囲が色付きで示されます。bandLowerStyle は、この範囲のスタイルを定義します。
bandLowerStyle bandLower で定義した範囲に適用する SVG CSS スタイル定義。
bandUpper 10 進数値。この値を定義すると、プロット領域でこの値よりも大きい範囲が色付きで示されます。bandUpperStyle は、この範囲のスタイルを定義します。
bandUpperStyle bandUpper で定義した範囲に適用する SVG CSS スタイル定義。
baseLineStyle ベース・ラインの SVG CSS スタイル定義。
currYAxis グラフに複数の y 軸がある場合、currYAxis はグラフに表示する y 軸を指定します。グラフの凡例では、現在の軸を使用するすべての項目がハイライト表示されます。ユーザがハイライト表示されていない凡例項目をクリックすると、対応する軸がアクティブになります。“グラフの軸” を参照してください。レポートは対話式ではないため、Zen レポート中の currYAxis は表示される軸を指定するだけです。
gridStyle SVG の CSS スタイル定義。このグラフのプロット領域に表示するすべてのグリッド線要素に既定で適用するスタイル。gridStyle を定義すると、このページの CSS スタイル定義で決められたスタイルはすべて、gridStyle でオーバーライドされますが、gridStyle による指定は、このグラフの特定の軸要素により定義されたスタイルでオーバーライドされます。
labelStyle SVG の CSS スタイル定義。このグラフのラベル要素すべてに既定で適用するスタイル。labelStyle を定義すると、このページの CSS スタイル定義で決められたスタイルはすべて、labelStyle でオーバーライドされますが、labelStyle による指定は、このグラフの特定の軸要素により定義されたスタイルでオーバーライドされます。
labelsVisible

True の場合、このグラフの軸ラベル (円グラフの場合は扇形に対するラベル) が表示されます。False の場合、ラベルは非表示になります。既定値は True です。

この属性で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。“Zen 属性のデータ型” を参照してください。

maxLabelLen

軸ラベルに表示する文字の最大数。既定値は 20 です。

ongetLabelX

<chart> の ongetLabelX イベント・ハンドラ。Zen はこのハンドラを呼び出すことで、x 軸のラベル用のテキストを提供します。“Zen コンポーネントのイベント・ハンドラ” を参照してください。このメソッドは、返すテキスト・ラベルに対応するデータ・ポイントの順序数 (先頭番号は 0) が設定された引数 value を受け入れる必要があります。 また、このメソッドは、この入力引数の値に基づくスイッチ文で構成することもできます。これはテキスト文字列を返す必要があります。以下はその例です。

ongetLabelX="return zenPage.getXLabels(value);"

ongetLabelY

ongetLabelX については、クライアント側 JavaScript 式。

円グラフについては、ongetLabelY は扇形のラベルを設定する属性です。

ongetSeriesColor ongetSeriesColor イベント・ハンドラ。グラフはこのイベント・ハンドラを呼び出して、特定のデータ系列の色を取得します。イベント・ハンドラには、系列の順序数 (先頭は 0) を格納している引数 series が渡されます。イベント・ハンドラが series の色を返さない場合は、seriesColorsseriesColorScheme、または seriesColorsOverride で指定されている色がグラフで使用されます。
onrenderData

オプションのイベント・ハンドラを指定します。イベント・ハンドラが定義されると、グラフがグリッド線とデータの表示を完了した直後にグラフによって呼び出されます。イベントハンドラは、現在のグラフ・オブジェクトの引数の chart を渡されます。新しい SVG コンテンツが追加される SVG グループ group も渡されます。

onrenderPlotArea クライアント側 JavaScript 式。グラフに onrenderPlotArea の値を指定すると、グラフは基本となるプロット領域 (および色付き範囲) を表示した後、グリッド線とデータを表示する前に onrenderPlotArea 式を呼び出します。

Zen レポートではサポートされていません。

plotAreaStyle このグラフのプロット領域パネルに適用する SVG CSS スタイル定義。
plotEdgeStyle

3 次元外観のグラフのプロット領域パネルの左端と下端に適用する SVG CSS スタイル定義。

plotStyle このグラフにデータをプロットするために使用する SVG 要素に既定で適用する SVG CSS スタイル定義。このような要素には、折れ線グラフの線や棒グラフの棒があります。
plotToEdge

カテゴリ軸に沿って値をプロットする方法を指定します。

  • True — 折れ線グラフのように、プロット領域の両端にそれぞれ最初の値と最後の値をプロットします。

  • False — 棒グラフのように、各単位の中央に値をプロットします。

この属性で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。“Zen 属性のデータ型” を参照してください。

scrollButtonStyle

ズーム・ボタンとスクロール・ボタンに適用される SVG の CSS スタイル定義 (オプション)。ズーム・ボタンとスクロール・ボタンを表示するには、hasZoom プロパティを使用します。

seriesColors

データ系列に使用する CSS カラー値をコンマで区切って指定したリスト。これらの色は、系列 0 には 1 番目の色、系列 1 には 2 番目の色というように、データ系列の順番に割り当てられます。seriesColors を省略すると、seriesColorScheme で定義された色が使用されます。

seriesColorScheme

グラフに対してデータ系列をプロットするために使用される、組み込み配色の名前です。指定可能な値は “urban”、“tuscan”、“caribbean”、“rustbelt”、“bright”、“glow”、“gray”、“pastel”、および “solid” です。既定値は "tuscan" です。このプロパティは seriesColors によりオーバーライドされます。

seriesColorsOverride

データ系列に使用する CSS カラー値をコンマで区切って指定した追加のリスト。指定された場合、このリストは seriesColorScheme または seriesColors リストの色とマージされます。

seriesNames

データ系列に使用する名前をコンマで区切って指定したリスト。これらの名前は、系列 0 には 1 番目の名前、系列 1 には 2 番目の名前というように、データ系列の順番に割り当てられます。凡例では、これらの名前が系列のラベルとして表示されます。

seriesNames 属性では、その ZENLOCALIZE データ型パラメータが 1 (True) に設定されています。これにより、そのテキストを他の言語にローカライズしやすくなり、クライアント側コードやサーバ側コードからこのプロパティに値を割り当てるときには $$$Text マクロを使用できます。

あらゆる seriesNames 文字列は、ローカライズした場合でもコンマ区切りリストの状態で維持する必要があります。

seriesYAxes

番号のコンマ区切りリスト。これらの番号は、グラフで定義されている複数の y 軸に対応しています。グラフは番号で指定された軸を使用して、対応するデータ系列をプロットします。番号は 0 ベースです。既定では、すべてのデータ系列で y 軸が使用されます。例えば、seriesYAxes="1,2,0" の場合、最初のデータ系列が 2 番目の軸上に、2 番目のデータ系列が 3 番目の軸上に、3 番目のデータ系列が最初の軸上にプロットされます。<xyChart>、<diffChart>、および <bubbleChart> では、代替 y 軸はサポートされていないことに注意してください。

グラフの軸” を参照してください。

stripeStyle

stripesVisible プロパティでストライプが有効にされた場合にグリッド・ストライプに適用される SVG の CSS スタイル定義 (オプション)。

stripesVisible

True の場合、ストライプは値の軸のグリッド線の上に表示されます。既定値は、false です。

この属性で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。“Zen 属性のデータ型” を参照してください。

textSize

グラフ・タイトルと軸ラベルで使用されるテキストのサイズを調整します。指定可能な値は、"small"、"medium"、"large" です。値が "medium" の場合、グラフには CSS で指定されている既定のフォント・サイズが使用されます。"small" または "large" の場合は、プロパティにより明示的なスタイルが設定されていない、グラフ内のテキストのサイズが調整されます。

unselectedItemStyle

選択されていないグラフ要素を示すために使用されるSVG の CSS 定義 (オプション)。選択されている要素がある場合に使用されます。

valueBoxStyle

値ラベルが含まれているボックスに適用される SVG CSS スタイル定義 (オプション)。ラベルを表示するには、valueLabelsVisible プロパティを使用します。

valueLabelFormat

値ラベルおよびツールのヒントの数値に適用する形式を指定します。この形式文字列の説明は、“DeepSee モデルの定義” の “[形式文字列] フィールド” セクションを参照してください。ラベルを表示するには、valueLabelsVisible プロパティを使用します。

valueLabelStyle

値ラベルに適用される SVG CSS スタイル定義 (オプション)。棒グラフなど、要素の値を表示するグラフにのみ適用されます。ラベルを表示するには、valueLabelsVisible プロパティを使用します。

valueLabelsVisible

グラフ内に要素の値を表示するかどうかを指定します。棒グラフなど、要素の値を表示するグラフにのみ適用されます。

この属性で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。“Zen 属性のデータ型” を参照してください。

複数のタイプのグラフにサポートされる属性もあります。これらの属性は、関連するグラフの属性のテーブルに記載されていますが、以下のセクションで詳細に説明します。

chartPivot

属性 chartPivot が True の場合は、x 軸が縦軸で y 軸が横軸になるようにグラフを回転させます。False の場合、グラフは一般的な形式 (x 軸が横軸、y 軸縦軸) で表示されます。

この属性で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。“Zen 属性のデータ型” を参照してください。

以下の図はピボット処理された棒グラフの例です。

ピボット処理された棒グラフ
generated description: svg barchart pivoted

chartStacked

属性 chartStacked は、複数のデータ系列がある場合に機能します。True の場合、データ系列は、別のデータ系列の上に積み重ねられて描画されます (加算した値で表示されます)。False の場合、棒は並べて表示されます (値は他の値による影響を受けません)。

この属性で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。“Zen 属性のデータ型” を参照してください。

プロパティ chartStacked を True に設定すると、グラフのすべてのデータ系列からの各データ・ポイントの値が 1 つの棒に積み重ねられて表示されます。以下の図は積み重ね棒グラフの例です。

積み重ね棒グラフ
generated description: svg barchart stacked

次の図は、積み重ね折れ線グラフで同じデータを示しています。

積み重ね折れ線グラフ
generated description: svg linechart stacked

showMultiples

属性 showMultiples が True の場合、小さな複数の表示をサポートするグラフでは、データは、データ系列ごとに 1 つの小さいグラフのセットとして表示されます。グラフのメソッド hasMultiples を使用すると、グラフが複数をサポートするかどうかを判断できます。

この属性で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。“Zen 属性のデータ型” を参照してください。

以下の図は、4 つのデータ系列を持ち、showMultiples="true" の場合の折れ線グラフを示しています。

複数のグラフとして表示された折れ線グラフ
generated description: svg linechart multiple

timeBased

属性 timeBased は、x 軸が時間軸であることを指定します。折れ線グラフとコンボ・グラフのタイプでのみ有効です。時間ベースのグラフをプロットするには、ongetLabelX コールバック・メソッドを使用して、YYYY-MM-DD または YYYY-MM-DD HH:MM:SS の形式で時刻値を指定する必要があります。これらの値は、x 軸の時間軸の適切な位置に配置されます。時間軸に値を配置するロジックは、返される日付の値によって決定するため、maxLabelLen プロパティは 10 より少ない値に設定できません。

グラフのプロパティ startTimeendTime は、時間軸の開始日と終了日を設定します。startTime および endTime の値を指定しないと、グラフは ongetLabelX コールバック・メソッドで返された最初と最後の値を使用します。

以下の図は、timeBased x 軸の影響を示しています。上のグラフは、時間ベースの x 軸を使用し、下のグラフは、同じ x 値をカテゴリ軸にプロットします。

時間ベースの折れ線グラフ
generated description: svg linechart timebased

マーカ

マーカは、グラフに沿って、各データ・ポイントの位置に配置されるシェイプです。グラフに複数の系列が存在する場合、マーカには系列ごとに異なるシェイプを使用できます。マーカ属性は、マーカをサポートしているタイプのグラフ (つまり、折れ線グラフ) にのみ適用されます。ベース・クラス %ZEN.SVGComponent.chartOpens in a new tab には、以下のマーカ属性があります。

属性 説明
markerScale マーカの表示倍率を表す 10 進数値。値 1.0 (または "") の場合、マーカは既定のサイズで表示されます。マーカを大きくする場合は大きな値を、小さくする場合は小さな値を使用します。
markerShapes

各系列に使用するシェイプをコンマで区切って指定したリスト。グラフの系列ごとに異なるシェイプを使用すると便利です。これにより、グラフのプロットの色分け以外にも、系列を区別する手段が得られます。このリストでは、以下のキーワードを自由に組み合わせ、必要な順序で指定できます。

  • "circle" — 円

  • "down" — 下向きの三角形

  • "square" — 正方形

  • "up" — 上向きの三角形

markerShapes の既定値は、"circle,up,down,square" です。

markerStyle SVG の CSS スタイル定義。このグラフのマーカ要素すべてに適用するスタイル。既定の設定では、系列のプロットと同じ色でシェイプが描画され、その内部は白で塗りつぶされます。
markersVisible

True の場合、マーカがサポートされているグラフであれば、データ・ポイントにマーカが表示されます。False の場合、マーカを定義していても表示されません。既定値は False です。

この属性で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。“Zen 属性のデータ型” を参照してください。

凡例

グラフの凡例のスタイル、および凡例を表示するかどうかは、ベース・クラス %ZEN.SVGComponent.chartOpens in a new tab の以下の属性で決まります。

属性 説明
legendHeight グラフに凡例を表示する場合、グラフの座標空間内での凡例ボックスの高さをこの属性で指定します。値は “サイズと位置の指定” で指定した方法で指定できます。既定の高さは、データ系列の数に基づきます。
legendLabelStyle 凡例ボックス内のラベル・テキストに適用する SVG CSS スタイル定義。
legendRectStyle 凡例ボックス内の現在の凡例を示す長方形に適用される SVG の CSS スタイル (オプション)。グラフに複数の y 軸がある場合に使用されます。
legendStyle 凡例ボックスの背景に適用する SVG CSS スタイル定義。
legendTitle 凡例ボックスに表示されるタイトル。
legendVisible

True の場合、このグラフに凡例が表示されます。既定値は False です。

この属性で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。“Zen 属性のデータ型” を参照してください。

legendWidth グラフに凡例を表示する場合、凡例ボックスの幅をこの属性で指定します。値は “サイズと位置の指定” で指定した方法で指定できます。legendWidth を指定しない場合は、既定の幅である 15 が割り当てられます。
legendX グラフに凡例を表示する場合、グラフの座標空間内の凡例ボックスの左上隅の x 位置を legendX で指定します。値は “サイズと位置の指定” で指定した方法で指定できます。座標空間に相対的に値を指定する場合、グラフの左上隅は (0,0) で、右下隅は (100,100) です。凡例の既定の位置は、グラフの右上隅です。
legendY グラフに凡例を表示する場合、グラフの座標空間内の凡例ボックスの左上隅の y 位置を legendY で指定します。legendX の値を指定します。凡例の既定の位置は、グラフの右上隅です。

タイトル

グラフ・タイトルのスタイルと内容は、ベース・クラス %ZEN.SVGComponent.chartOpens in a new tab の以下の属性で決まります。

属性 説明
multipleTitleStyle

データ系列が複数のグラフとして表示される場合に作成される小さなグラフそれぞれのタイトル・テキストに使用される SVG の CSS スタイル定義 (オプション)。showMultiplesOpens in a new tab が有効な場合に使用されます。

subtitle

グラフのサブタイトルに使用するテキスト。

この属性に普通のテキストを入力できる場合でも、基本となるデータ型 %ZEN.Datatype.captionOpens in a new tab が与えられます。“Zen 属性のデータ型” を参照してください。

subtitleStyle

SVG の CSS スタイル定義。subtitle テキストのスタイルを指定します。

title

グラフのタイトルに使用するテキスト。既定では、グラフ領域の上部に中央揃えされます。titleXtitleY、および titleAlign を使用できます。

この属性に普通のテキストを入力できる場合でも、基本となるデータ型 %ZEN.Datatype.captionOpens in a new tab が与えられます。“Zen 属性のデータ型” を参照してください。

titleAlign

タイトルとサブタイトルの配置。指定できる値は、“center”、“left”、および “right” です。既定値は “center” です。

titleBoxStyle SVG の CSS スタイル定義。titlesubtitle テキストを含むボックスのスタイルを指定します。
titleStyle SVG の CSS スタイル定義。title テキストのスタイルを指定します。
titleX グラフにタイトルを表示する場合、タイトルの x 位置をこの属性で指定します。この値は、titleAlign で指定されたとおりに適用されます。例えば、titleAlign が “center” の場合、titleX はタイトルを中央に配置します。値は “サイズと位置の指定” で指定した方法で指定できます。既定は、“center” です。
titleY グラフにタイトルを表示する場合、グラフの座標空間内でのタイトル・テキストの底辺の y 位置をこの属性で指定します。'p' や 'q' などの文字の下の部分は、このラインよりも下に表示されます。値は “サイズと位置の指定” で指定した方法で指定できます。既定の位置はグラフ上部のすぐ下、既定の marginTop 内です。

ユーザの選択

ユーザによるグラフ操作は、以下の属性で制御されます。Zen レポートは対話式ではないため、このセクションのプロパティはいずれもサポートされません。

属性 説明
onelementClick

グラフの “onelementClick イベント・ハンドラ”。ユーザがグラフ要素 (折れ線グラフのマーカや棒グラフの棒など) をクリックするたびに、Zen によってこのハンドラが呼び出されます。“Zen コンポーネントのイベント・ハンドラ” を参照してください。

このメソッドでは、このグラフ・オブジェクトを表す引数 chart をとる必要があります。その後、このオブジェクトに対して、現在選択されているデータ・ポイントを特定するメソッド (getSelectedItem) または現在選択されているデータ系列を特定するメソッド (getSelectedSeries) を呼び出します。どちらのメソッドも選択されている項目の順序数 (先頭は 0) を返します。また、現在何も選択されていない場合は -1 を返します。以下はその例です。

onelementClick="zenPage.chartElementClick(chart);"

onelementClick 式を指定していない場合は、Zen 独自のハンドラにより、selectedItemselectedSeries の値が指定されます。

Zen レポートではサポートされていません。

selectedItem 折れ線グラフのマーカや棒グラフの棒など、現在選択しているグラフ要素の順序数 (先頭は 0)。現在何も選択していない場合、この値は -1 です。

Zen レポートではサポートされていません。

selectedItemStyle グラフで現在選択している項目に適用する SVG CSS スタイル定義。

Zen レポートではサポートされていません。

selectedSeries グラフで現在選択している系列の順序数 (先頭は 0)。どの系列も選択していない場合は -1 です。

Zen レポートではサポートされていません。

グラフの軸

Zen では、円グラフ以外のすべてのグラフは x および y 軸と共に表示されます。軸は、グラフ・データがどのように表示されるかを決定します。<xAxis> または <yAxis> 要素を使用して、軸の値の範囲 (minValue から maxValue まで) を指定できます。指定しない場合は、データ値の範囲に基づいて、これらの値が自動的に決定されます。

  • <xAxis> は、グラフのタイプに応じて、カテゴリ軸または値軸になります。カテゴリ軸は、データ・カテゴリの名前を指定します。値軸はプロットされるデータの値を示します。

  • <yAxis> は値軸です。

1 つのグラフに対して複数の y 軸を指定できます。これにより、値の範囲が異なる複数のデータ系列を、同じグラフ内に意味のある方法でプロットすることが可能になります。以下の例では、マサチューセッツ州ボストン地域の住宅に対する、暖房度日 (HDD) およびキロワット時 (kWh) 単位の電気使用量の 6 か月分のデータをプロットします。暖房度日とは、住宅を暖めるためのエネルギー需要の尺度です。この例では、HDD のデータ値の範囲は 11 ~ 34、kWh のデータ値の範囲は 841 ~ 1148 です。以下のコード例は、2 つの軸 (1 つは 10 ~ 40 の値に対するもので、もう 1 つは 700 ~ 1200 の値に対するもの) を使用して、これら 2 つのデータ系列をプロットする折れ線グラフを作成します。

<lineChart id="chart" 
  ongetData="return zenPage.getLineChartData(series);"
  onelementClick="zenPage.chartElementClick(chart);"
  ongetLabelX="return zenPage.getXLabels(value);"
  seriesNames="HDD,kWh"
  backgroundStyle="fill: #cccccc;" 
  plotAreaStyle="fill: #eeeeee;"
  title="Line Chart: Two Y Axes" 
  currYAxis="1"
  seriesCount="2"
  seriesSize="6"
  seriesColorScheme="solid"
  plotStyle="stroke-width: 1px;"
  labelsVisible="true"
  seriesYAxes="1,0"
  width="300" 
  height="300">
  <xAxis id="xAxis" />
  <yAxis minorGridLines="true" minValue="700" maxValue="1200" labelUnits="100" 
    minorUnits="10" majorUnits="50" majorGridLines="true" />
  <yAxis minorGridLines="true" minValue="10" maxValue="40" labelUnits="10" baseValue="0"/>
</lineChart>

seriesYAxes プロパティはデータ系列を軸と関連付けます。currYAxis プロパティは、グラフを最初に表示したときにアクティブな軸を指定します。“プロット領域” を参照してください。以下の図は、表示されるグラフを示しています。左側の図は、最初に表示される、HDD 軸が表示された状態のグラフを示しています。現在使用されている軸に関連するデータ系列であることを示すために、凡例内で HDD 項目がハイライト表示されています。凡例内で [kWh] をクリックすると、対応する y 軸が表示されます。アクティブな軸に関連付けられているデータ系列がすべてハイライト表示されます。

2 つの y 軸を持つ折れ線グラフ
generated description: svg two y axes

これらのグラフを、1 つの軸で HDD と kWh の両方をプロットしている以下のグラフと比較してください。

1 つの y 軸にプロットされた同じデータ
generated description: svg same axis

<xyChart>、<diffChart>、および <bubbleChart> では、代替 y 軸はサポートされていないことに注意してください。

%ZEN.Auxiliary.axisOpens in a new tab クラスの以下の属性は、グラフ定義で <xAxis> または <yAxis> のいずれかの属性として使用できます。これらの属性はすべてオプションです。指定しない場合は、グラフに指定したデータに基づいて、適切な既定値が自動的に使用されます。

グラフの軸属性
属性 説明
axisType この軸のラベルの表示のさらなる制御機能を提供します。値が NULL 文字列 ("") の場合、軸は、値またはカテゴリ・ラベルを表示します。値が "percent" の場合、軸は、値ラベルを割合で表示します。axisType は、この軸上にプロットされる値に対するツールのヒントの形式にも影響します。valueLabelFormat も設定されている場合は、その形式がツールのヒントに優先されます。
baseValue 塗りつぶし領域のあるグラフ (棒グラフ) では、塗りつぶし領域底部のプロット位置を表す 10 進数値を baseValue で指定します。省略した場合、または空白 ("") を指定した場合、塗りつぶし領域の底部の位置はプロット領域の底部になります。
labelPosition

グラフのどちら側にこの軸のラベルを表示するかどうかを指定します。指定可能は値は、y 軸には "left" と "right"、x 軸には "top" と "bottom" です。既定値は、y 軸に "left"、x 軸に "bottom" です。

labelStyle この軸に沿って表示するテキスト・ラベルに適用する SVG CSS スタイル定義。
labelUnits 値軸に沿って表示するラベルとラベルの間隔を表す 10 進数値。カテゴリ軸では無視されます。labelUnits を省略した場合、または空白 ("") を指定した場合は、データ系列に基づいて、自動的に値が計算されます。
majorGridLines

True の場合、この軸の主単位ごとにグリッド線が表示されます。False の場合、主グリッド線は表示されません。既定値は True です。

この属性で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。“Zen 属性のデータ型” を参照してください。

majorGridStyle この軸に沿って表示する主グリッド線に適用する SVG CSS スタイル定義。
majorUnits この軸に沿って表示する主グリッド線の間隔を表す 10 進数値。majorUnits を省略した場合、または空白 ("") を指定した場合は、データ系列に基づいて、自動的に値が計算されます。
maxValue この軸に沿って表示するデータの最大値を表す 10 進数値。maxValue を省略した場合、または空白 ("") を指定した場合は、データ系列に基づいて、自動的に値が計算されます。
minValue この軸に沿って表示する最小値を表す 10 進数値。minValue を省略した場合、または空白 ("") を指定した場合は、データ系列に基づいて、自動的に値が計算されます。
minorGridLines

True の場合、この軸の補助単位ごとにグリッド線が表示されます。False の場合、補助グリッド線は表示されません。既定値は True です。

この属性で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。“Zen 属性のデータ型” を参照してください。

minorGridStyle この軸に沿って表示する補助グリッド線に適用する SVG CSS スタイル定義。
minorUnits この軸に沿って表示する補助グリッド線の間隔を表す 10 進数値。minorUnits を省略した場合、または空白 ("") を指定した場合は、データ系列に基づいて、自動的に値が計算されます。
title

軸のタイトルに使用するテキスト。

この属性に普通のテキストを入力できる場合でも、基本となるデータ型 %ZEN.Datatype.captionOpens in a new tab が与えられます。“Zen 属性のデータ型” を参照してください。

プログラムで %ZEN.SVGComponent.chartOpens in a new tab サブクラスを処理する場合、軸は chart オブジェクトの xAxis プロパティおよび yAxis プロパティとして扱います。これらの各プロパティは、これまでに説明した属性に対応するプロパティを持つ %ZEN.Auxiliary.axisOpens in a new tab オブジェクトです。

FeedbackOpens in a new tab