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

折れ線グラフを使う　[JavaFX] [編集]

前置き

JavaFXで折れ線グラフを表示させる。
時系列でデータの推移を観測する時などに適したグラフ。

今回のポイントは、折れ線グラフのY軸を NumberAxis クラスで取得し、プロット範囲を指定している所。この時 isAutoRanging をfalseに設定し、プロット範囲の自動設定をOFFにしておかないと、手動設定の指定が有効にならないことに注意。

実装

FXDemo.fxml

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

<?import javafx.scene.chart.CategoryAxis?>
<?import javafx.scene.chart.LineChart?>
<?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>
        <LineChart fx:id="chtExample" BorderPane.alignment="CENTER">
        <xAxis>
            <CategoryAxis side="BOTTOM" />
        </xAxis>
        <yAxis>
            <NumberAxis side="LEFT" />
        </yAxis>
        </LineChart>
    </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.LineChart
import javafx.scene.chart.NumberAxis
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: LineChart<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("４月", 67))
        student1.data.add(XYChart.Data("５月", 69))
        student1.data.add(XYChart.Data("６月", 62))
        student1.data.add(XYChart.Data("７月", 67))
        student1.data.add(XYChart.Data("８月", 69))
        student1.data.add(XYChart.Data("９月", 65))
        student1.data.add(XYChart.Data("１０月", 65))
        student1.data.add(XYChart.Data("１１月", 69))
        student1.data.add(XYChart.Data("１２月", 72))
        student1.data.add(XYChart.Data("１月", 68))
        student1.data.add(XYChart.Data("２月", 72))
        student1.data.add(XYChart.Data("３月", 72))

        val student2 = Series<String, Number>()
        student2.name = "生徒B"
        student2.data.add(XYChart.Data("４月", 61))
        student2.data.add(XYChart.Data("５月", 61))
        student2.data.add(XYChart.Data("６月", 59))
        student2.data.add(XYChart.Data("７月", 62))
        student2.data.add(XYChart.Data("８月", 61))
        student2.data.add(XYChart.Data("９月", 61))
        student2.data.add(XYChart.Data("１０月", 64))
        student2.data.add(XYChart.Data("１１月", 65))
        student2.data.add(XYChart.Data("１２月", 64))
        student2.data.add(XYChart.Data("１月", 67))
        student2.data.add(XYChart.Data("２月", 67))
        student2.data.add(XYChart.Data("３月", 66))

        val student3 = Series<String, Number>()
        student3.name = "生徒C"
        student3.data.add(XYChart.Data("４月", 62))
        student3.data.add(XYChart.Data("５月", 57))
        student3.data.add(XYChart.Data("６月", 57))
        student3.data.add(XYChart.Data("７月", 60))
        student3.data.add(XYChart.Data("８月", 65))
        student3.data.add(XYChart.Data("９月", 60))
        student3.data.add(XYChart.Data("１０月", 63))
        student3.data.add(XYChart.Data("１１月", 65))
        student3.data.add(XYChart.Data("１２月", 62))
        student3.data.add(XYChart.Data("１月", 67))
        student3.data.add(XYChart.Data("２月", 65))
        student3.data.add(XYChart.Data("３月", 65))

        val student4 = Series<String, Number>()
        student4.name = "生徒D"
        student4.data.add(XYChart.Data("４月", 59))
        student4.data.add(XYChart.Data("５月", 58))
        student4.data.add(XYChart.Data("６月", 60))
        student4.data.add(XYChart.Data("７月", 61))
        student4.data.add(XYChart.Data("８月", 65))
        student4.data.add(XYChart.Data("９月", 65))
        student4.data.add(XYChart.Data("１０月", 62))
        student4.data.add(XYChart.Data("１１月", 61))
        student4.data.add(XYChart.Data("１２月", 65))
        student4.data.add(XYChart.Data("１月", 65))
        student4.data.add(XYChart.Data("２月", 67))
        student4.data.add(XYChart.Data("３月", 65))

        chtExample.title = "Line Chart Sample"
        chtExample.xAxis.label = "月"
        val y: NumberAxis = chtExample.yAxis as NumberAxis
        y.label = "偏差値"
        y.isAutoRanging = false // 自動範囲設定をOFFにする
        y.upperBound = 75.0     // Y軸の最大範囲を75に設定
        y.lowerBound = 55.0     // Y軸の最小範囲を55に設定
        chtExample.data.addAll(student1, student2, student3, student4)
    }

    companion object {

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