モジュール javafx.controls

パッケージjavafx.scene.chart

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

一般的なタイプのチャート(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;}