2011/04/12

チャート: 固定線の描画 (Reference lines)

チャートに固定の線(リファレンス・ライン)および近似線を描画する方法について説明します。


【固定線 (Reference line)】
リファレンス・ラインは以下の要素を設定することで出力します。それぞれの軸について、3本まで描画することができます。
  • X1ReferenceLine
  • Y1ReferenceLine
  • Y2ReferenceLine

ReferenceLine には以下の属性が定義されています。これらの内、index は必須です。ゼロ、1または2を設定します。
  • index
  • visible (true | false)
  • lineWidth
  • text
  • value
  • displayedInLegend (true | false)
  • lineColor



出力結果とコードは以下の通り(下線部)です。平均値をあらわす緑の水平線が出力されます。


<Graph seriesEffect="SE_NONE" graphType= "BAR_VERT_STACK" textAntialiasing="true">
  <LegendArea visible="true" />
  <LegendText>
    <GraphFont fontColor="#C8D2BE" />
  </LegendText>


  <Background fillTransparent="false">
    <SFX fillType="FT_GRADIENT" gradientDirection="GD_DOWN" gradientNumStops="3">
      <GradientStopStyle stopIndex="0" gradientStopPosition="0.0" gradientStopColor="#46463C" />
      <GradientStopStyle stopIndex="1" gradientStopPosition="50.0" gradientStopColor="#64645F" />
      <GradientStopStyle stopIndex="2" gradientStopPosition="100.0" gradientStopColor="#46463C" />
    </SFX>
  </Background>


  <O1TickLabel>
    <GraphFont fontColor="#C8D2BE" />
  </O1TickLabel>
  <Y1TickLabel>
    <GraphFont fontColor="#C8D2BE" />
  </Y1TickLabel>


  <O1Axis lineColor="#55554B" />
  <Y1Axis lineColor="#55554B" />


  <SeriesItems>
    <Series id="0" borderTransparent="false" borderColor="#A0A0A0" color="#7896BE" />
    <Series id="1" borderTransparent="false" borderColor="#A0A0A0" color="#FAE10F" />
  </SeriesItems>


  <Y1ReferenceLine>
    <ReferenceLine index="0" visible="true" lineWidth="1" text="Avg." value="1950" displayedInLegend="true" lineColor="#55BE3C"/>
  </Y1ReferenceLine>



複数のリファレンス・ラインを描画する場合は以下の様に表記します。valueに値を動的に設定する方法については、「チャート: Y軸の設定」を参照して下さい。

  <Y1ReferenceLine>
    <ReferenceLine index="0" visible="true" lineWidth="1" text="Avg." value="{$valMin}" displayedInLegend="true" lineColor="#55BE3C"/>
    <ReferenceLine index="1" visible="true" lineWidth="1" text="Low" value="{$valMax}" displayedInLegend="true" lineColor="#ff0000"/>
    <ReferenceLine index="2" visible="true" lineWidth="1" text="High" value="{$valAvg}" displayedInLegend="true" lineColor="#0000ff"/>
  </Y1ReferenceLine>




【近似線 (Trend line)】
近似線は fitlineType を指定すると表示されます。設定可能な値は以下の通りです。
  • fitlineType (FT_NONE | FT_LINEAR | FT_LOGARITHMIC | FT_EXPONENTIAL)
近似線の太さや色など、表示に関する変更、または次数の設定はできない様です。



[ Summary ]
The example shows the reference line (static line) usage. X1, Y1 and Y2 axises support three static lines and one trend line each.  To set the value dynamically (on runtime), see Chart Y axis.


Static line:
Set index attribute "0" for the first line, "1" for the second one, and "2" for the third line.


Trend line:
Set fitlineType to show the trend line. As far as I checked, this is very poor function.  You cannot set the order variable nor style.

0 件のコメント:

コメントを投稿