チャート： 背景 (Chart background)

チャートの背景設定について説明します。

背景の設定は以下の箇所において設定可能です。

• Background
• PlotArea
• LegendArea

グラデーションやテクスチャを使用する場合にはSFX および GradientStopStyle を設定します。
SFX には以下の属性が定義されています。

• fillType (FT_COLOR | FT_GRADIENT | FT_TEXTURE) #IMPLIED
• gradientDirection (GD_RIGHT | GD_LEFT | GD_DOWN | GD_UP | GD_DOWN_LEFT | GD_UP_LEFT | GD_DIAGONAL_45 | GD_DIAGONAL_135 | GD_DOWN_RIGHT | GD_UP_RIGHT | GD_RADIAL | GD_RADIAL_TOP_LEFT | GD_RADIAL_TOP_RIGHT | GD_RADIAL_BOTTOM_LEFT | GD_RADIAL_BOTTOM_RIGHT)
• gradientNumStops
• gradientReversed (true | false)
• textureDisplayMode (TDM_STRETCHED | TDM_TILED)
• textureURL

GradientStopStyle には以下の属性が定義されています。

• stopIndex
• gradientStopPosition
• gradientStopColor

単色での塗りつぶし、グラデーション、およびテクスチャの適用について、以下にサンプルを示します。



【チャート全体の背景を単色で描画】
チャートコンポーネントの領域全体の設定は Background で行います。
<Background fillTransparent="false" fillColor="#dddddd" />

Figure 1: Fill whole background

【プロットエリアをグラデーションで描画】
グラフの描画領域の背景は PlotArea で設定します。グラデーション設定を行う場合、SFXおよび GradientStopStyle を設定します。
<PlotArea fillTransparent="false">
  <SFX fillType="FT_GRADIENT" gradientDirection="GD_DOWN" gradientNumStops="3">
    <GradientStopStyle stopIndex="0" gradientStopPosition="0" gradientStopColor="#dddddd" />
    <GradientStopStyle stopIndex="1" gradientStopPosition="50" gradientStopColor="#ffffff" />
    <GradientStopStyle stopIndex="2" gradientStopPosition="100" gradientStopColor="#dddddd" />
  </SFX>
</PlotArea>

Figure 2: Fill the plot area with gradient color

【補足：グラデーションの設定について】
GradientStopStyle は、gradientNumStops で指定された数を記載する必要があります。
stopIndexはゼロから開始します。gradientStopPosition は、グラデーションの開始をゼロ、終了を１００として、グラデーションの割合を設定します。以下に設定例と出力結果を組み合わせた図を示します。
<Background fillTransparent="false">
  <SFX fillType="FT_GRADIENT" gradientDirection="GD_LEFT" gradientNumStops="5">
    <GradientStopStyle stopIndex="0" gradientStopPosition=  "0" gradientStopColor="#000000" />
    <GradientStopStyle stopIndex="1" gradientStopPosition= "30" gradientStopColor="#0000ff" />
    <GradientStopStyle stopIndex="2" gradientStopPosition= "70" gradientStopColor="#00ff00" />
    <GradientStopStyle stopIndex="3" gradientStopPosition= "90" gradientStopColor="#ff0000" />
    <GradientStopStyle stopIndex="4" gradientStopPosition="100" gradientStopColor="#ffffff" />
  </SFX>
</Background>

Figure 3: Gradient color setting

【テクスチャの適用】
テクスチャを用いる場合は、SFX にて表示する画像をURL指定します。ローカルファイルの指定も可能です。
<PlotArea fillTransparent="false">
  <SFX fillType="FT_TEXTURE" textureURL="file:///C:/workspace/keyboard.jpg" textureDisplayMode="TDM_STRETCHED" />
</PlotArea>

Figure 4: Texture

---

[ Summary ]
Chart background, plot area, and legend area supports single-color paint, multi-color gradient, and texture fill.
In the figure 1, background is painted gray.


Figure 2 shows how to display gradient color.  GradientStopStyle setting is not so user-friendly.  So, refer Figure 3 for more understanding.


The last example is texture setting.  You can get image via http.  Local image file is also available.