torutkのブログスマートフォン用の表示で見るtorutkのブログソフトウェア・エンジニアのブログ2019-07-07JavaFXで折れ線グラフを出そうとしてみたはじめに(お題)電気信号を時間領域から周波数領域に変換し、周波数に対するエネルギー量を解析できる測定器にスペクトラム・アナライザがあります。今回、このスペクトラム・アナライザで解析した結果をファイルに保存し、別な場所にあるPC上でその結果を表示、分析したいとします。計測器にCSVファイルで結果を保存する機能があればこれをExcelで読み込ませてグラフ化することは容易ですが、今回の計測器はバイナリデータのファイルに保存するものでした。そこで、JavaFXで保存したバイナリデータのファイルを読み込み折れ線グラフ(LineChart)で表示するプログラムを作成してみます。Builderで作成しました。ファイル構成は次です。BuilderでLineChartを画面にポトペタすると次の表示となります。縦軸は数値メモリとなっていますが、横軸は表示されていません。Builderの左下ペインを見ると、LineChartの子ノードとしてNumberAxisとCategoryAxisが1つずつ置かれています。縦軸がNumberAxisで、横軸がCategoryAxisです。NumberAxisは名前の通り数値の軸を表し、CategoryAxisは何らかの分類(県名、年別、チーム別、など)の軸を表します。Builder上では、LineChartの子ノードの軸を変更する方法が見つからなかったので、FXMLファイルを直接エディタで開き修正しました。</LineChart>横軸がNumberAxisに変更されました。}}JavaFXの典型的なApplication派生クラスの実装です。mainメソッドでプロセスのエントリを用意し、startメソッドでFXMLファイルを読み込みシーングラフを作成、Stageを表示させています。Builderでポトペタ作成したFXMLファイルで、ビュー(画面)を定義しています。コントローラークラスを指定しているので、このFXMLがロードされると自動でコントローラークラスのインスタンスが生成されます。}}FXMLに対応するコントローラークラスです。コントローラーから操作するビュー部品(コントロール)は、@FXMLアノテーションを指定し、FXML側で指定したfx:idの識別子と同じ名前の変数名とすることで、FXMLロード時にインスタンスがインジェクションされます。データについては、今回はデータファイルの読み込み部分が未実装なので、ランダムな値を表示するモデルを使います。}JavaFXではモデルクラスについては特にフレームワークが用意されていませんが、コントローラーを軽くするために、ちょっとしたロジックであってもモデルクラスを設けるようにしています。表示確認のために、データファイルを読み込む前にランダムなスペクトルを表示するモデルを作りました。JavaFXの折れ線グラフ(LineChart)に表示する1本の連続する線は、データ系列(XYChart.Series)で定義し、複数のデータ系列を表示することができます。データ系列は、複数の点データ(XYChart.Data)のリストとして作られています。今回は、1つのデータ系列を用意しています。用意するデータは、周波数軸(X軸)の950~1450までの間を1刻みで作成し、縦軸の電力は正規分布乱数で平均-60.0、分散5.0としています。表示プログラムを実行すると、次の画面が表示されました。改善したい点があります。Builderで、軸のLabelプロパティに文字列を設定すれば表示できます。縦軸は、-30.0~-80.0の範囲を表示し、横軸は950~1450の範囲を表示します。表示すべきデータを読み込んだ際にデータに応じた値を設定するので、コードで制御します。前回からのコード変更部分を次に記載します。}NumberAxisには、表示する軸の値の上限値・下限値を指定するlowerBound、upperBoundがあります。ここに表示する軸の数値範囲を指定します。この上下限値設定は、LineChartにデータ(XYChart.Series)を登録する前に実行する必要があります。あとから実行したら表示には反映されません。これだけでは意図したとおりの動作をしません。NumberAxisのAutoRangingプロパティが有効だと、登録したデータの値に応じた軸の数値範囲に自動調整が働いてしまいます。Builder上でAutoRangingプロパティを無効にします(次の図参照)。プログラムを実行すると、次の様に意図した数値範囲でグラフが表示されました。グラフの罫線間隔については、NumberAxisのTickUnitプロパティで制御可能です。〇の表示(シンボル)をなくすデフォルトでは、折れ線グラフの点データに丸いシンボルが表示されます。データ数が少ないときは、データとデータを補完する線とを明確に表現するこの表示が適していますが、データ数が多いときは上図のようにシンボルだらけで肝心の折れ線が見えなくなってしまいます。シンボルをなくすのであれば、LineChartのCreateSymbolプロパティを無効にします(次の図参照)。プログラムを実行すると、次のとおり丸いシンボルが表示されなくなりました。シンボルを消すのではなく、シンボルの形状を変更したいときは、CSSでセレクターに.chart-line-symbolを指定し見栄えを記述します。折れ線を細くデフォルトでは、折れ線の幅がちょっと太いので、これを細くします。形状の変更はCSSで記述します。セレクターに.chart-series-lineを指定し見栄えを記述します。0.75px;}CSSファイルは、アプリケーション派生クラスでSceneに設定するか、FXMLで最上位要素に指定するかの方法があります。Builder)上で最上位要素のBorderPaneにCSSファイルを設定します。CSSファイルはFXMLファイルと同じ場所に置き、BorderPaneのStylesheetsプロパティに指定します(次の図参照)。プログラムを実行すると、次のとおり折れ線が細くなりました。凡例の記号を四角ではなく線にするCSSファイルで凡例の記号を定義している@.chart-legend-item-symbol@の定義を変更します。CHART_COLOR_8;}デフォルトの凡例シンボルは枠が系列色、中が白色塗りつぶしの円です。@-fx-background-radius@と@-fx-background-insets@はデフォルトの定義を無効化するのに指定する模様です(細部よくわからない)グラフはデフォルトで8つまで色分けできるようにCHART_COLOR_1からCHART_COLOR_8まで色が定義されています。svg-pathで定義した枠の中をグラフの対応する色で塗りつぶすために、@.default-colorX.chart-legend-item-symbol@を定義しています。先週書いた次のブログの続編です。月別アーカイブはてなブログをはじめよう!torutkさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。