2011/04/13

チャート: 円グラフ (Pie chart)

円グラフの設定について説明します。
円グラフについては 表示ラベルの種類と書式、スライスの引き離し(Explode)、および3D効果が設定できます。

Graph に定義されている属性の内、以下の項目が円グラフに関係します。
  • pieRotation (0 - 360)
  • pieDepth (0 - 100)
  • pieTilt (0 - 100)

ラベルに関する設定はSliceLabel の以下の属性で設定します。
  • textType (LD_VALUE | LD_PERCENT | LD_TEXT | LD_TEXT_PERCENT)
  • textRotation (TR_HORIZ | TR_HORIZ_ROTATE_90 | TR_HORIZ_ROTATE_270)
  • visible (true | false)
  • fontSizeAbsolute (true | false)

Sliceには以下の1つだけ属性が定義されています
  • labelPosition (LP_NO_LABELS | LP_OUTSIDE_WITH_FEELER | LP_OUTSIDE_WITHOUT_FEELER | LP_INSIDE)

上記の他、Series の属性の内、pieSliceExplode が円グラフの表現に関係します。

主な属性について、以下にサンプルコードと実行結果を示します。


【3D効果とスライスの引き離し(explode)】
以下の例では、グラフの厚さを最大(100)、視点の傾きを30に設定します。また、4番目のスライス(id="3")を引き離して表示します。
<Graph pieDepth="100" pieTilt="30" seriesEffect="SE_AUTO_GRADIENT" graphType="PIE">
  <LegendArea visible="true" />
  <SeriesItems>
    <Series id="0" color="#87A5F5" />
    <Series id="1" color="#87D71E" />
    <Series id="2" color="#5569D7" />
    <Series id="3" color="#F0871E" pieSliceExplode="100" />
    <Series id="4" color="#525456" />
  </SeriesItems>

Figure 1


【ラベルの書式】
以下の様に、要素を非表示にして表現することもできます。また、SliceLabelにてラベルの表示内容を変更しています。

<Graph pieDepth="100" pieTilt="30" seriesEffect="SE_AUTO_GRADIENT" graphType="PIE">
  <LegendArea visible="false" />
  <SliceLabel textType="LD_TEXT_PERCENT" visible="true">
    <ViewFormat decimalDigit="0" decimalDigitUsed="true" />
  </SliceLabel>
  <SeriesItems>
    <Series id="0" color="#87A5F5" />
    <Series id="1" color="#87D71E" />
    <Series id="2" color="#5569D7" />
    <Series id="3" transparent="true" />
    <Series id="4" color="#525456" />
  </SeriesItems>


Figure 2




【ラベルの表示位置】
ラベルを要素の内部に表示します。

<Graph seriesEffect="SE_AUTO_GRADIENT" graphType="PIE">
  <LegendArea visible="true" />
  <SliceLabel fontSizeAbsolute="true">
    <ViewFormat decimalDigit="0" decimalDigitUsed="true" />
    <GraphFont size="24" style="FS_BOLD" fontColor="#ffffff" />
  </SliceLabel>
  <Slice labelPosition="LP_INSIDE" />
  <SeriesItems borderUsingDefaults="true" defaultBorderColor="#ffffff" defaultBorderTransparent="false">
    <Series id="0" color="#87A5F5" />
    <Series id="1" color="#87D71E" />
    <Series id="2" color="#5569D7" />
    <Series id="3" color="#F0871E" />
    <Series id="4" color="#525456" />
  </SeriesItems>


Figure 3






[ Summary ]
Figure 1 shows how pieSliceExplode works.  The "exploded" orange slice is separated from the other.
In figure 2, you see the orange slice is hidden by transparent.
You can change the label position as shown in figure 3.

0 件のコメント:

コメントを投稿