	ブログをはじめるログイン

棒グラフを使う　[JavaFX] [編集]

前置き

JavaFXで棒グラフを表示させる。
X軸とY軸を反転させると横棒グラフを表示させることも可能。(未確認)
あと、積上げ棒グラフも表現できる(当然、未確認)ので、用途に合わせて選択できる。

スキルの幅を少し拡張したかったので、今回からKotlinで実装している。
Kotlinの文法等は、他の入門サイト等で十分補完可能なので割愛。
JavaからKotlinに移行するにあたり、ハマった箇所をメモしておく。

@FXMLで読み込むコントロールは lateinit var で宣言しておく
initializeメソッドの引数はnull考慮にしておく
launchメソッドの引数に自クラスを指定しておく

実装

FXDemo.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.chart.BarChart?>
<?import javafx.scene.chart.CategoryAxis?>
<?import javafx.scene.chart.NumberAxis?>
<?import javafx.scene.layout.BorderPane?>

<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="500.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="jp.ne.yonem.FXDemo">
    <center>
        <BarChart fx:id="chtExample" BorderPane.alignment="CENTER">
        <xAxis>
            <CategoryAxis side="BOTTOM" />
        </xAxis>
        <yAxis>
            <NumberAxis side="LEFT" />
        </yAxis>
        </BarChart>
    </center>
</BorderPane>

FXDemo.kt

package jp.ne.yonem

import javafx.application.Application
import javafx.fxml.FXML
import javafx.fxml.FXMLLoader
import javafx.fxml.Initializable
import javafx.scene.Scene
import javafx.scene.chart.BarChart
import javafx.scene.chart.XYChart
import javafx.scene.chart.XYChart.Series
import javafx.scene.layout.BorderPane
import javafx.stage.Stage
import java.net.URL
import java.util.*

class FXDemo : Application(), Initializable {

    @FXML
    lateinit var chtExample: BarChart<String, Number>

    override fun start(stage: Stage) {
        stage.scene = Scene(FXMLLoader.load<BorderPane>(javaClass.getResource("FXDemo.fxml")))
        stage.title = "FXDemo"
        stage.show()
    }

    override fun initialize(location: URL?, resources: ResourceBundle?) {
        val student1 = Series<String, Number>()
        student1.name = "生徒A"
        student1.data.add(XYChart.Data("国語", 79))
        student1.data.add(XYChart.Data("数学", 71))
        student1.data.add(XYChart.Data("理科", 68))
        student1.data.add(XYChart.Data("英語", 40))

        val student2 = Series<String, Number>()
        student2.name = "生徒B"
        student2.data.add(XYChart.Data("国語", 49))
        student2.data.add(XYChart.Data("数学", 35))
        student2.data.add(XYChart.Data("理科", 80))
        student2.data.add(XYChart.Data("英語", 43))

        val student3 = Series<String, Number>()
        student3.name = "生徒C"
        student3.data.add(XYChart.Data("国語", 43))
        student3.data.add(XYChart.Data("数学", 61))
        student3.data.add(XYChart.Data("理科", 59))
        student3.data.add(XYChart.Data("英語", 80))

        val student4 = Series<String, Number>()
        student4.name = "生徒D"
        student4.data.add(XYChart.Data("国語", 80))
        student4.data.add(XYChart.Data("数学", 60))
        student4.data.add(XYChart.Data("理科", 77))
        student4.data.add(XYChart.Data("英語", 71))

        chtExample.title = "Bar Chart Sample"
        chtExample.xAxis.label = "教科"
        chtExample.yAxis.label = "得点"
        chtExample.data.addAll(student1, student2, student3, student4)
        chtExample.categoryGap = 80.0 // カテゴリ同士の間隔を設定
        chtExample.barGap = 10.0      // バー同士の間隔を設定
    }

    companion object {

        @JvmStatic
        fun main(args: Array<String>) {
            launch(FXDemo::class.java, *args)
        }
    }
}