JavaFX でサポートされている XY チャート　その1

最近、記事が散らばってきたので収拾をつけていきましょう。　まずは 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])
                }
            }
        }
    }
}