2011年2月10日木曜日

ExtJSで折れ線グラフを出したときの線のスタイル

ExtJSのチャート(Ext.chart)は簡単にグラフを表示できるのだが、
マニュアルに何が指定できるのか説明がほとんどない。

デコンパイラでcharts.swfの内部を調べて何ができるのか少し調べてみた。
ほんとは動的にseriesを増減させるメソッドが無いか調べていたのだが
それらしいものは無かった。
代わりにseriesで指定できそうなstyleのプロパティを見つけたのでメモしておく
※visibilityでおおっと思ったがpi chart専用だった

{
 height:350,
 xtype: 'linechart',
 store: store,
 xField: 'date',
 series: [{
  type:'line',
  displayName: 'line1',
  yField: 'val1',
  style: {
   color: 0xFF9999,
   lineSize:2,
   lineAlpha:0.6,
   alpha:0.6
  }
 },{
  type:'line',
  displayName: 'line2',
  yField: 'val2',
  style: {
   color: 0x99FF99,
   lineSize:2,
   lineAlpha:0.6,
   alpha:0.6
  }
 }]
}

「color」はサンプルのコードにあり、意味も明らかだ
「lineSize」は線の太さでデフォルトの太めの線は「3」が設定してあるように思える
「lineAlpha」は線の不透明度でデフォルトは「1(おそらく不透明)」になっている
「alpha」はマーカの不透明度だと思う

他に
images 円グラフのみ
image 折れ線グラフのマーカのイメージ?
mode
colors
borderColor
borderAlpha
fillColor
fillAlPha
size
lineColor 折れ線グラムのみ
lineAlpha 折れ線グラムのみ
showAreaFill
areaFillAlpha
connectPoints 折れ線グラムのみ
connectDistinuousPoints
distinuousDashLength
showLabels
hideOverlappingLabels
font
visibility 円グラフのみ
skin 折れ線グラフのみ

とが、charts.swf > action(3) > Charts > setSeriesStyles() のswitchのcaseラベルにあったが、未調査。

1 件のコメント:

  1. 多めに作っておいて使わないところを不透明度0にすれば、実質ダイナミックに増減できるかな。

    返信削除