最近、記事が散らばってきたので収拾をつけていきましょう。 まずは JavaFX/GroovyFX。 前回、JavaFX でサポートされているチャートの分類と PieChart を見ました。 今回と次回で XYChart を見ていきます。
参考 URL
- GroovyFX Repository のデモ groovyfx/src/demo/groovy/
データとシリーズ
まずは XYChart が使用するデータのデータ・モデルを見ていきましょう。 XYChart では、データの最小単位は2つの数値(BarChart の場合は文字列と数値、BubbleChart の場合は3つの数値)からなる XYChart.Data です。 この XYChart.Data を1つ以上持つ XYChart.Series があり、XYChart はこの XYChart.Series を1つ以上持ちます。
次は XYChart へデータをセットする方法。 主に次の2つの方法があります:
- data 属性でセットする方法
- series ノードでセットする方法
PieChart の場合はデータ構築のためのノードはサポートされてませんでしたが、XYChart の場合は series ノードというのが使えるようです。 ちなみに XYChart の場合も PieChart の場合と同じく ObservableList オブジェクトを生成してセットすることもできると思いますが、この記事では省略。
具体的なコードで見ていきましょう。 まずは data 属性を使った方法:
lineChart(data:[ First: [0, 0.25, 0.5, 1.5, 2, 1.0], // (0, 0.25), (0.5, 1.5), (2, 1.0) という3組の XYChart.Data Second: [[0.25, 0], [0.5, 0.5], [1.5, 0.75]] // 3組の XYChart.Data ])
data 属性には Map オブジェクトを渡しますが、Map の値は List もしくは Map です。 List を渡した場合は、前から2つずつ組にして XYChart.Data にされます。 次は series ノードを使った方法。
lineChart{ series(name:'First', data:[0, 0.25, 0.5, 1.5, 2, 1.0]) series(name:'Second', data:[[0.25, 0], [0.5, 0.5], [1.5, 0.75]]) }
series ノードの data 属性も List もしくは Map オブジェクトを渡せます。 結果は同様。
XYChart のデータ作成方法を見たので、次は XYChart の種類を具体的に見ていきましょう。 ノード名が少々違うだけで、使い方はほとんど同じ。 今回見ていくのは
- LineChart
- AreaChart
- BarChart
です。
LineChart
import groovyx.javafx.GroovyFX import groovyx.javafx.SceneGraphBuilder GroovyFX.start { new SceneGraphBuilder().stage(title:'Line Chart Demo', width:500, height:500, visible: true) { scene { lineChart(title:'Line Chart', data:[ First: [0, 0.25, 0.5, 1.5, 2, 1.0], Second: [0.25, 0, 0.5, 0.5, 1.5, 0.75] ]) } } }
軸の設定をイジっているサンプルもあったので試してみました:
import groovyx.javafx.GroovyFX import groovyx.javafx.SceneGraphBuilder GroovyFX.start { new SceneGraphBuilder().stage(title:'Line Chart', width:500, height:500, visible:true) { scene { stackPane { lineChart(title:'Line Chart', XAxis:categoryAxis(label:'X Axis')) { numberAxis(lowerBound:-1.2, upperBound:1.2, tickUnit:0.2, autoRanging:false, label:'Y Axis') series(name:'First Series', data:['A', 0, 'B', 1, 'C', -1]) series(name:'Second Series', data:[['A', 0], ['B', -1], ['C', 1], ['D', 0]]) } } } } }
AreaChart
import groovyx.javafx.GroovyFX import groovyx.javafx.SceneGraphBuilder GroovyFX.start { new SceneGraphBuilder().stage(title: 'GroovyFX Chart Demo', width:500, height:500, visible: true) { scene { areaChart(title:'Area Chart'){ series(name: 'First Series', data: [0, 0, 0.5, 0.2, 1.5, 0.6, 2, 0.8]) series(name: 'Second Series', data: [0, 0, 0.25, 0.2, 0.5, 0.6, 2.25, 0.4]) } } } }
BarChart
import groovyx.javafx.GroovyFX import groovyx.javafx.SceneGraphBuilder GroovyFX.start { new SceneGraphBuilder().stage(title:'Bar Chart', width:500, height:500, visible:true) { scene { stackPane { barChart(title:'Bar Chart', barGap:0, categoryGap:0) { series(name:'My Score', data:['Q1', 153, 'Q2', 269, 'Q3', 194, 'Q4', 315]) series(name:'Your Score', data:['Q1', 200, 'Q2', 150, 'Q3', 125, 'Q4', 100]) } } } } }
- 作者: 関谷和愛,上原潤二,須江信洋,中野靖治
- 出版社/メーカー: 技術評論社
- 発売日: 2011/07/06
- メディア: 単行本(ソフトカバー)
- 購入: 6人 クリック: 392回
- この商品を含むブログ (152件) を見る
JavaFX 2.0: Introduction by Example
- 作者: Carl Dea
- 出版社/メーカー: Apress
- 発売日: 2011/12/07
- メディア: ペーパーバック
- クリック: 5回
- この商品を含むブログ (7件) を見る