パッケージjavafx.scene.chart

JavaFXユーザー・インタフェースは、データ視覚化の非常に便利な方法である一連のチャート・コンポーネントを提供します。

参照: 説明

クラスのサマリー

クラス	説明
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>	データが数値として定義される軸。
XYChart<X,Y>	すべての2軸チャートのチャート・ベース・クラス。
XYChart.Data<X,Y>	2軸チャートのデータを持つ単一データ・アイテム
XYChart.Series<X,Y>	データ・アイテムの名前付き系列

列挙型のサマリー

列挙型	説明
LineChart.SortingPolicy	この列挙は、LineChart.axisSortingPolicyProperty()のポリシーを定義します。

パッケージjavafx.scene.chartの説明

JavaFXユーザー・インタフェースは、データ視覚化の非常に便利な方法である一連のチャート・コンポーネントを提供します。アプリケーション開発者は、SDKで用意されているこれらのグラフィカルなチャートを利用して、様々なデータを視覚化できます。

一般的なタイプのチャート(Bar、Line、Area、Pie、Scatter、Bubbleチャートなど)が提供されます。これらのチャートは、簡単に作成およびカスタマイズできます。JavaFXチャートAPIは、モデル中心というよりはビジュアル中心のAPIです。

JavaFXチャートでは、チャート・コンポーネントのアニメーション、およびチャートの軸の自動範囲指定をサポートします。また、他のJavaFX UIコントロールと同様、チャートのビジュアル・コンポーネントはCSSを介してスタイル設定できます。このため、CSSを介してスタイル設定できる複数のパブリック・ビジュアル・プロパティがあります。このドキュメントの後の部分で例を示します。

次の表は、既存のチャート・タイプと、意図した使用方法の簡単なサマリーを示しています。

Chart	サマリー
LineChart	系列のデータ・ポイント間の線をプロットします。通常、時間経過に伴うデータの傾向を表示するために使用します。
AreaChart	データ・ポイントと軸を結ぶ線の間の面をプロットします。時間経過に伴い累積される合計の比較に適しています。
BarChart	データ値を示す高さを持ち、データが属するカテゴリに対応した矩形の棒をプロットします。不連続または離散したデータの表示に使用します。
PieChart	セグメントに分かれ、各セグメントが全体の比率としての値を表す、円形のチャートをプロットします。パイに似ていることから、このような名前が付いています。
BubbleChart	系列のデータ・ポイントのバブルをプロットします。プロットされた各エンティティが、2Dチャートで3つのパラメータを表現する、独特のチャート・タイプです。
ScatterChart	系列のデータ・ポイント間のシンボルをプロットします。このタイプのチャートは、クラスタリングが存在する場合に、データの分散およびデータの相関関係の表示に役立ちます。

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;}