パッケージjavafx.scene.chart
JavaFXユーザー・インタフェースは、データ視覚化の非常に便利な方法である一連のチャート・コンポーネントを提供します。 アプリケーション開発者は、さまざまなデータを視覚化するために、JavaFXランタイムによって提供されるこれらのラック外のグラフィカル・チャートを利用することができます。
一般的なタイプのチャート(Bar
、Line
、Area
、Pie
、Scatter
、Bubble
チャートなど)が提供されます。 これらのチャートは、簡単に作成およびカスタマイズできます。 JavaFXチャートAPIは、モデル中心というよりはビジュアル中心のAPIです。
JavaFXチャートでは、チャート・コンポーネントのアニメーション、およびチャートの軸の自動範囲指定をサポートします。 また、他のJavaFX UIコントロールと同様、チャートのビジュアル・コンポーネントはCSSを介してスタイル設定できます。 このため、CSSを介してスタイル設定できる複数のパブリック・ビジュアル・プロパティがあります。 このドキュメントの後の部分で例を示します。
次の表は、既存のチャート・タイプと、意図した使用方法の簡単なサマリーを示しています。
Chart |
サマリー |
---|---|
系列のデータ・ポイント間の線をプロットします。 通常、時間経過に伴うデータの傾向を表示するために使用します。 |
|
データ・ポイントと軸を結ぶ線の間の面をプロットします。 時間経過に伴い累積される合計の比較に適しています。 |
|
データ値を示す高さを持ち、データが属するカテゴリに対応した矩形の棒をプロットします。 不連続または離散したデータの表示に使用します。 |
|
セグメントに分かれ、各セグメントが全体の比率としての値を表す、円形のチャートをプロットします。 パイに似ていることから、このような名前が付いています。 |
|
系列のデータ・ポイントのバブルをプロットします。 プロットされた各エンティティが、2Dチャートで3つのパラメータを表現する、独特のチャート・タイプです。 |
|
系列のデータ・ポイント間のシンボルをプロットします。 このタイプのチャートは、クラスタリングが存在する場合に、データの分散およびデータの相関関係の表示に役立ちます。 |
Chart
はすべてのチャートのベース・クラスです。 背景、フレーム、タイトルおよび凡例の描画を行います。 これを拡張してカスタムのチャート・タイプを作成できます。 XYChart
はすべての2軸チャートのベース・クラスで、Chartクラスから拡張されています。 主に、2つの軸と、チャート・プロットの背景の描画を行います。 2軸チャートではないためChartクラスから拡張されているPieChartを除き、ほとんどのチャートはXYChartクラスから拡張されています。
javafx.scene.chart
パッケージには、2つの軸チャートを作成するときに使用できる軸クラスが含まれています。 Axis
は、すべてのチャート軸の抽象ベース・クラスです。 CategoryAxis
では、各値が軸沿いの一意のカテゴリとなる、文字列カテゴリをプロットします。 NumberAxis
では数値の範囲をプロットし、tickUnitごとに大目盛があります。
たとえば、BarChartは、一連のXYChart.Series
オブジェクトからのデータをプロットします。 各系列にはXYChart.Data
オブジェクトが含まれます。
// add data
XYChart.Series<String,Number> series1 = new XYChart.Series<String,Number>();
series1.setName("Data Series 1");
series1.getData().add(new XYChart.Data<String,Number>("2007", 567));
追加の系列オブジェクトを同様に定義できます。 次のコード・スニペットは、3つのカテゴリおよびそのX軸とY軸を持つBarChartを作成する方法を示しています。
static String[] years = {"2007", "2008", "2009"};
final CategoryAxis xAxis = new CategoryAxis();
final NumberAxis yAxis = new NumberAxis();
final BarChart<String,Number> bc = new BarChart<String,Number>(xAxis, yAxis);
xAxis.setCategories(FXCollections.<String>observableArrayList(Arrays.asList(years)));
bc.getData().addAll(series1, series2, series3);
JavaFXチャートは、ライブ・データ・セットからリアルタイムまたは動的にチャートを作成する場合(オンライン株、Webトラフィックなど)に非常に役立ちます。 シミュレートされたデータを使用して作成される動的チャートの例を次に示します。 Timeline
を使用して、時間経過(時間単位)に伴う株の価格変動の動的データをシミュレートします。
private XYChart.Series<Number,Number> hourDataSeries;
private NumberAxis xAxis;
private Timeline animation;
private double hours = 0;
private double timeInHours = 0;
private double prevY = 10;
private double y = 10;
// timeline to add new data every 60th of a second
animation = new Timeline();
animation.getKeyFrames().add(new KeyFrame(Duration.millis(1000 / 60), new EventHandler<ActionEvent>() {
@Override public void handle(ActionEvent actionEvent) {
// 6 minutes data per frame
for(int count = 0; count < 6; count++) {
nextTime();
plotTime();
}
}
}));
animation.setCycleCount(Animation.INDEFINITE);
xAxis = new NumberAxis(0, 24, 3);
final NumberAxis yAxis = new NumberAxis(0, 100, 10);
final LineChart<Number,Number> lc = new LineChart<Number,Number>(xAxis, yAxis);
lc.setCreateSymbols(false);
lc.setAnimated(false);
lc.setLegendVisible(false);
lc.setTitle("ACME Company Stock");
xAxis.setLabel("Time");
xAxis.setForceZeroInRange(false);
yAxis.setLabel("Share Price");
yAxis.setTickLabelFormatter(new NumberAxis.DefaultFormatter(yAxis, "$", null));
hourDataSeries = new XYChart.Series<Number,Number>();
hourDataSeries.setName("Hourly Data");
hourDataSeries.getData().add(new XYChart.Data<Number,Number>(timeInHours, prevY));
lc.getData().add(hourDataSeries);
private void nextTime() {
if (minutes == 59) {
hours++;
minutes = 0;
} else {
minutes++;
}
timeInHours = hours + ((1d/60d) * minutes);
}
private void plotTime() {
if ((timeInHours % 1) == 0) {
// change of hour
double oldY = y;
y = prevY - 10 + (Math.random() * 20);
prevY = oldY;
while (y < 10 || y > 90) y = y - 10 + (Math.random() * 20);
hourDataSeries.getData().add(new XYChart.Data<Number, Number>(timeInHours, prevY));
// after 25hours delete old data
if (timeInHours > 25) hourDataSeries.getData().remove(0);
// every hour after 24 move range 1 hour
if (timeInHours > 24) {
xAxis.setLowerBound(xAxis.getLowerBound() + 1);
xAxis.setUpperBound(xAxis.getUpperBound() + 1);
}
}
}
startメソッドは、animation,.play()を呼び出して、シミュレートされる動的チャートを開始する必要があります。
CSSスタイル設定については、javafx.scene.controlパッケージのドキュメントを参照してください。 CSSを介してチャートのスタイルを設定する例として、次のようにチャート・コンテンツの背景を特定の色に設定します。
.chart-content { -fx-background-color: cyan;}
折れ線チャートの線の色を次のようにスタイル設定できます。
.chart-series-line { -fx-stroke: green; -fx-stroke-width: 4px;}
-
クラスのサマリー クラス 説明 AreaChart<X,Y> AreaChart - データ・ポイントを結ぶ線とY軸上の0線の間の面をプロットします。Axis<T> チャート領域に描画される軸を表すJavaFXのすべての軸のベース・クラス。Axis.TickMark<T> TickMarkはラベル・テキストを表し、関連付けられたプロパティが軸に沿った各目盛となります。BarChart<X,Y> カテゴリのデータ値を示す棒をプロットするチャート。BubbleChart<X,Y> 系列のデータ・ポイントのバブルをプロットするチャート・タイプ。CategoryAxis 各値が一意のカテゴリ(目盛)として軸に沿って示される、文字列カテゴリに対して機能する軸の実装。Chart すべてのチャートのベース・クラス。LineChart<X,Y> 折れ線チャートでは、系列のデータ・ポイントを結ぶ線をプロットします。NumberAxis tickUnitごとに大目盛のある数値の範囲をプロットする軸クラスです。NumberAxis.DefaultFormatter NumberAxis用のデフォルトの数値フォーマッタであり、自動範囲指定と同期化され、値を適切にフォーマットします。PieChart PieChartを表示します。PieChart.Data PieChartの1区分を表す、PieChartデータ・アイテムScatterChart<X,Y> 系列のデータ・ポイントのシンボルをプロットするチャート・タイプ。StackedAreaChart<X,Y> StackedAreaChartは、各値の分布の傾向を表示するAreaChart
のバリエーションです。StackedBarChart<X,Y> StackedBarChartは、カテゴリのデータ値を示す棒をプロットするBarChart
のバリエーションです。ValueAxis<T extends Number> データがNumbersとして定義されている軸。XYChart<X,Y> すべての2軸チャートのチャート・ベース・クラス。XYChart.Data<X,Y> 2軸チャートのデータを持つ単一データ・アイテムXYChart.Series<X,Y> データ・アイテムの名前付き系列 -
列挙型のサマリー 列挙型 説明 LineChart.SortingPolicy この列挙は、LineChart.axisSortingPolicyProperty()
のポリシーを定義します。