JavaFXの柔軟なチャート





JavaFXはかなり奇妙なものです。 一方で、考え抜かれて快適に思えるので、可能な限りそれを使いたいです。 一方、それは非常に不器用なので、書き直したいと思います。 グラフィカルインターフェイスの一部は非常に奇妙に動作し、その他は最終として宣言されており、追加することはできません。

JavaFXでグラフィカルな要素がどのように表現され、スケジュールを多様化する方法に関心がある場合は、自己の責任においてカットラインを開いてください。



JavaFXのGUIフレームワーク



JavaFXはRIAフレームワークです。 また、グラフィック要素の外観の設定はすべてCSSを介してのみ変更できるため、SwingまたはAWTでグラフィックを介して使用されていたインターフェイスを変更する通常の方法を使用することはできません。

また、他のJava GUIフレームワークとは異なり、JavaFX自体の複雑な実装のため、JavaFXで新しいグラフィカル要素を作成することは非常に困難です。 したがって、要素の作成中に、古い要素から構築されます。



これは、グラフィックなどの複雑なコントロールを作成するときにJavaFX開発者自身が行うことです。

これは新しいことではありませんが、JavaFXと他のフレームワークの主な違いは、構造が完全なアクセス権を持つツリーであるということです。つまり、これらすべての要素にアクセスして、CSSまたは他の方法で簡単に構成できます。



例として、LineChart設定を示します。



LineChartセットアップ



何かを構成するには、その価値を明確に理解する必要があります。

lookupAll関数、そして最後に、 JavaFXコンポーネントの文字列への適切な変換は LineChartの構成要素を理解するのに役立ちます。



このコードを実行することにより:



VBox vBox = new VBox(); LineChart chart = new LineChart(new NumberAxis(), new NumberAxis()); chart.getData().add(new XYChart.Series<>("Temp1", FXCollections.observableArrayList(new XYChart.Data<Object, Object>(1, 1), new XYChart.Data<Object, Object>(2, 2), new XYChart.Data<Object, Object>(3, 4)))); vBox.getChildren().add(chart); primaryStage.setScene(new Scene(vBox)); primaryStage.show(); ((XYChart.Series) chart.getData().get(0)).getData().addAll(new XYChart.Data<>(5, 5)); chart.lookupAll("*").forEach(c->{ System.out.println(c); System.out.println(); });
      
      





結果
LineChart @ be5a370 [styleClass = chart]



ラベル@ 7415bead [styleClass = label chart-title] ''



テキスト[text = ""、x = 0.0、y = 0.0、alignment = LEFT、origin = BASELINE、boundsType = LOGICAL_VERTICAL_CENTER、font = Font [name = System Regular、family = System、style = Regular、size = 18.200000762939453]、fontSmoothingType = LCD、塗りつぶし= 0x333333ff]



チャート$ 1 @ 2fca6f84 [styleClass = chart-content]



リージョン@ 285a8729 [styleClass = chart-plot-background]



XYChart $ 1 @ 53306ff



パス[elements = []、fill = null、fillRule = NON_ZERO]



Path [elements = [MoveTo [x = 39.0、y = 45.0]、LineTo [x = 481.0、y = 45.0]、LineTo [x = 481.0、y = 81.0]、LineTo [x = 39.0、y = 81.0]、ClosePath 、MoveTo [x = 39.0、y = 116.0]、LineTo [x = 481.0、y = 116.0]、LineTo [x = 481.0、y = 152.0]、LineTo [x = 39.0、y = 152.0]、ClosePath、MoveTo [x = 39.0、y = 187.0]、LineTo [x = 481.0、y = 187.0]、LineTo [x = 481.0、y = 223.0]、LineTo [x = 39.0、y = 223.0]、ClosePath、MoveTo [x = 39.0、y = 258.0]、LineTo [x = 481.0、y = 258.0]、LineTo [x = 481.0、y = 294.0]、LineTo [x = 39.0、y = 294.0]、ClosePath]、fill = null、fillRule = NON_ZERO]



パス[要素= [MoveTo [x = 73.5、y = 10.0]、LineTo [x = 73.5、y = 329.0]、MoveTo [x = 107.5、y = 10.0]、LineTo [x = 107.5、y = 329.0]、MoveTo [x = 141.5、y = 10.0]、LineTo [x = 141.5、y = 329.0]、MoveTo [x = 175.5、y = 10.0]、LineTo [x = 175.5、y = 329.0]、MoveTo [x = 209.5、y = 10.0]、LineTo [x = 209.5、y = 329.0]、MoveTo [x = 243.5、y = 10.0]、LineTo [x = 243.5、y = 329.0]、MoveTo [x = 277.5、y = 10.0]、LineTo [ x = 277.5、y = 329.0]、MoveTo [x = 311.5、y = 10.0]、LineTo [x = 311.5、y = 329.0]、MoveTo [x = 345.5、y = 10.0]、LineTo [x = 345.5、y = 329.0]、MoveTo [x = 379.5、y = 10.0]、LineTo [x = 379.5、y = 329.0]、MoveTo [x = 413.5、y = 10.0]、LineTo [x = 413.5、y = 329.0]、MoveTo [x = 447.5、y = 10.0]、LineTo [x = 447.5、y = 329.0]、MoveTo [x = 481.5、y = 10.0]、LineTo [x = 481.5、y = 329.0]]、fill = null、fillRule = NON_ZERO、ストローク= 0xdcdcdcff、strokeWidth = 1.0]



パス[elements = [MoveTo [x = 39.0、y = 294.5]、LineTo [x = 481.0、y = 294.5]、MoveTo [x = 39.0、y = 258.5]、LineTo [x = 481.0、y = 258.5]、MoveTo [x = 39.0、y = 223.5]、LineTo [x = 481.0、y = 223.5]、MoveTo [x = 39.0、y = 187.5]、LineTo [x = 481.0、y = 187.5]、MoveTo [x = 39.0、y = 152.5]、LineTo [x = 481.0、y = 152.5]、MoveTo [x = 39.0、y = 116.5]、LineTo [x = 481.0、y = 116.5]、MoveTo [x = 39.0、y = 81.5]、LineTo [ x = 481.0、y = 81.5]、MoveTo [x = 39.0、y = 45.5]、LineTo [x = 481.0、y = 45.5]、MoveTo [x = 39.0、y = 10.5]、LineTo [x = 481.0、y = 10.5]]、fill = null、fillRule = NON_ZERO、stroke = 0xdcdcdcff、strokeWidth = 1.0]



行[startX = 39.5、startY = 10.0、endX = 39.5、endY = 329.0、ストローク= 0x646464ff、strokeWidth = 1.0]



行[startX = 39.0、startY = 329.5、endX = 481.0、endY = 329.5、ストローク= 0x646464ff、strokeWidth = 1.0]



グループ@ 2bdd794e [styleClass = plot-content]



Path [elements = [MoveTo [x = 136.0、y = 248.0]、LineTo [x = 136.0、y = 248.0]、LineTo [x = 272.0、y = 177.0]、LineTo [x = 408.0、y = 35.0]]、 fill = null、fillRule = NON_ZERO、stroke = 0xf3622dff、strokeWidth = 3.0]



StackPane @ 26193c9c [styleClass = chart-line-symbol series0 data0 default-color0]



StackPane @ 6bb5f434 [styleClass = chart-line-symbol series0 data1 default-color0]



StackPane @ 38bfa9d7 [styleClass = chart-line-symbol series0 data2 default-color0]



NumberAxis @ 392fac3b [styleClass = axis]



ラベル@ 2051bac6 [styleClass = label axis-label] ''



テキスト[text = ""、x = 0.0、y = 0.0、alignment = LEFT、origin = BASELINE、boundsType = LOGICAL_VERTICAL_CENTER、font = Font [name = System Regular、family = System、style = Regular、size = 13.0]、fontSmoothingType = LCD、塗りつぶし= 0x333333ff]



パス[elements = [MoveTo [x = 0.0、y = 0.0]、LineTo [x = 0.0、y = 8.0]、MoveTo [x = 34.0、y = 0.0]、LineTo [x = 34.0、y = 8.0]、MoveTo [x = 68.0、y = 0.0]、LineTo [x = 68.0、y = 8.0]、MoveTo [x = 102.0、y = 0.0]、LineTo [x = 102.0、y = 8.0]、MoveTo [x = 136.0、y = 0.0]、LineTo [x = 136.0、y = 8.0]、MoveTo [x = 170.0、y = 0.0]、LineTo [x = 170.0、y = 8.0]、MoveTo [x = 204.0、y = 0.0]、LineTo [ x = 204.0、y = 8.0]、MoveTo [x = 238.0、y = 0.0]、LineTo [x = 238.0、y = 8.0]、MoveTo [x = 272.0、y = 0.0]、LineTo [x = 272.0、y = 8.0]、MoveTo [x = 306.0、y = 0.0]、LineTo [x = 306.0、y = 8.0]、MoveTo [x = 340.0、y = 0.0]、LineTo [x = 340.0、y = 8.0]、MoveTo [x = 374.0、y = 0.0]、LineTo [x = 374.0、y = 8.0]、MoveTo [x = 408.0、y = 0.0]、LineTo [x = 408.0、y = 8.0]、MoveTo [x = 442.0、y = 0.0 ]、LineTo [x = 442.0、y = 8.0]]、fill = null、fillRule = NON_ZERO、stroke = 0xc3c3c3ff、strokeWidth = 1.0]



パス[要素= [MoveTo [x = 7.0、y = 1.0]、LineTo [x = 7.0、y = 5.0]、MoveTo [x = 14.0、y = 1.0]、LineTo [x = 14.0、y = 5.0]、MoveTo [x = 20.0、y = 1.0]、LineTo [x = 20.0、y = 5.0]、MoveTo [x = 27.0、y = 1.0]、LineTo [x = 27.0、y = 5.0]、MoveTo [x = 41.0、y = 1.0]、LineTo [x = 41.0、y = 5.0]、MoveTo [x = 48.0、y = 1.0]、LineTo [x = 48.0、y = 5.0]、MoveTo [x = 54.0、y = 1.0]、LineTo [ x = 54.0、y = 5.0]、MoveTo [x = 61.0、y = 1.0]、LineTo [x = 61.0、y = 5.0]、MoveTo [x = 68.0、y = 1.0]、LineTo [x = 68.0、y = 5.0]、MoveTo [x = 75.0、y = 1.0]、LineTo [x = 75.0、y = 5.0]、MoveTo [x = 82.0、y = 1.0]、LineTo [x = 82.0、y = 5.0]、MoveTo [x = 88.0、y = 1.0]、LineTo [x = 88.0、y = 5.0]、MoveTo [x = 95.0、y = 1.0]、LineTo [x = 95.0、y = 5.0]、MoveTo [x = 109.0、y = 1.0 ]、LineTo [x = 109.0、y = 5.0]、MoveTo [x = 116.0、y = 1.0]、LineTo [x = 116.0、y = 5.0]、MoveTo [x = 122.0、y = 1.0]、LineTo [x = 122.0、y = 5.0]、MoveTo [x = 129.0、y = 1.0]、LineTo [x = 129.0、y = 5.0]、MoveTo [x = 143.0、y = 1.0]、LineTo [x = 143.0、y = 5.0] 、MoveTo [x = 150.0、y = 1.0]、LineTo [x = 150.0、y = 5.0]、MoveTo [x = 156.0、y = 1.0]、LineTo [x = 156.0、y = 5.0]、MoveTo [x = 163.0 、y = 1.0]、LineTo [x = 163.0、y = 5.0]、MoveT o [x = 177.0、y = 1.0]、LineTo [x = 177.0、y = 5.0]、MoveTo [x = 184.0、y = 1.0]、LineTo [x = 184.0、y = 5.0]、MoveTo [x = 190.0、 y = 1.0]、LineTo [x = 190.0、y = 5.0]、MoveTo [x = 197.0、y = 1.0]、LineTo [x = 197.0、y = 5.0]、MoveTo [x = 211.0、y = 1.0]、LineTo [x = 211.0、y = 5.0]、MoveTo [x = 218.0、y = 1.0]、LineTo [x = 218.0、y = 5.0]、MoveTo [x = 224.0、y = 1.0]、LineTo [x = 224.0、y = 5.0]、MoveTo [x = 231.0、y = 1.0]、LineTo [x = 231.0、y = 5.0]、MoveTo [x = 245.0、y = 1.0]、LineTo [x = 245.0、y = 5.0]、MoveTo [ x = 252.0、y = 1.0]、LineTo [x = 252.0、y = 5.0]、MoveTo [x = 258.0、y = 1.0]、LineTo [x = 258.0、y = 5.0]、MoveTo [x = 265.0、y = 1.0]、LineTo [x = 265.0、y = 5.0]、MoveTo [x = 279.0、y = 1.0]、LineTo [x = 279.0、y = 5.0]、MoveTo [x = 286.0、y = 1.0]、LineTo [x = 286.0、y = 5.0]、MoveTo [x = 292.0、y = 1.0]、LineTo [x = 292.0、y = 5.0]、MoveTo [x = 299.0、y = 1.0]、LineTo [x = 299.0、y = 5.0 ]、MoveTo [x = 306.0、y = 1.0]、LineTo [x = 306.0、y = 5.0]、MoveTo [x = 313.0、y = 1.0]、LineTo [x = 313.0、y = 5.0]、MoveTo [x = 320.0、y = 1.0]、LineTo [x = 320.0、y = 5.0]、MoveTo [x = 326.0、y = 1.0]、LineTo [x = 326.0、y = 5.0]、MoveTo [x = 333.0、y = 1.0] 、LineTo [x = 333.0、y = 5.0 ]、MoveTo [x = 340.0、y = 1.0]、LineTo [x = 340.0、y = 5.0]、MoveTo [x = 347.0、y = 1.0]、LineTo [x = 347.0、y = 5.0]、MoveTo [x = 354.0、y = 1.0]、LineTo [x = 354.0、y = 5.0]、MoveTo [x = 360.0、y = 1.0]、LineTo [x = 360.0、y = 5.0]、MoveTo [x = 367.0、y = 1.0] 、LineTo [x = 367.0、y = 5.0]、MoveTo [x = 374.0、y = 1.0]、LineTo [x = 374.0、y = 5.0]、MoveTo [x = 381.0、y = 1.0]、LineTo [x = 381.0 、y = 5.0]、MoveTo [x = 388.0、y = 1.0]、LineTo [x = 388.0、y = 5.0]、MoveTo [x = 394.0、y = 1.0]、LineTo [x = 394.0、y = 5.0]、 MoveTo [x = 401.0、y = 1.0]、LineTo [x = 401.0、y = 5.0]、MoveTo [x = 408.0、y = 1.0]、LineTo [x = 408.0、y = 5.0]、MoveTo [x = 415.0、 y = 1.0]、LineTo [x = 415.0、y = 5.0]、MoveTo [x = 422.0、y = 1.0]、LineTo [x = 422.0、y = 5.0]、MoveTo [x = 428.0、y = 1.0]、LineTo [x = 428.0、y = 5.0]、MoveTo [x = 435.0、y = 1.0]、LineTo [x = 435.0、y = 5.0]、MoveTo [x = 442.0、y = 1.0]、LineTo [x = 442.0、y = 5.0]]、fill = null、fillRule = NON_ZERO、stroke = 0xc3c3c3ff、strokeWidth = 1.0]



テキスト[text = "0.00"、x = 0.0、y = 0.0、alignment = LEFT、origin = BASELINE、boundsType = LOGICAL、font = Font [name = System Regular、family = System、style = Regular、size = 10.800000190734863 ]、fontSmoothingType = GRAY、fill = 0x585858ff]



テキスト[text = "0.25"、x = 0.0、y = 0.0、alignment = LEFT、origin = BASELINE、boundsType = LOGICAL、font = Font [name = System Regular、family = System、style = Regular、size = 10.800000190734863 ]、fontSmoothingType = GRAY、fill = 0x585858ff]



テキスト[text =“ 0.50”、x = 0.0、y = 0.0、alignment = LEFT、origin = BASELINE、boundsType = LOGICAL、font = Font [name = System Regular、family = System、style = Regular、size = 10.800000190734863 ]、fontSmoothingType = GRAY、fill = 0x585858ff]



テキスト[text = "0.75"、x = 0.0、y = 0.0、alignment = LEFT、origin = BASELINE、boundsType = LOGICAL、font = Font [name = System Regular、family = System、style = Regular、size = 10.800000190734863 ]、fontSmoothingType = GRAY、fill = 0x585858ff]



テキスト[text = "1.00"、x = 0.0、y = 0.0、alignment = LEFT、origin = BASELINE、boundsType = LOGICAL、font = Font [name = System Regular、family = System、style = Regular、size = 10.800000190734863 ]、fontSmoothingType = GRAY、fill = 0x585858ff]



テキスト[text =“ 1.25”、x = 0.0、y = 0.0、alignment = LEFT、origin = BASELINE、boundsType = LOGICAL、font = Font [name = System Regular、family = System、style = Regular、size = 10.800000190734863 ]、fontSmoothingType = GRAY、fill = 0x585858ff]



テキスト[text =“ 1.50”、x = 0.0、y = 0.0、alignment = LEFT、origin = BASELINE、boundsType = LOGICAL、font = Font [name = System Regular、family = System、style = Regular、size = 10.800000190734863 ]、fontSmoothingType = GRAY、fill = 0x585858ff]



テキスト[text =“ 1.75”、x = 0.0、y = 0.0、alignment = LEFT、origin = BASELINE、boundsType = LOGICAL、font = Font [name = System Regular、family = System、style = Regular、size = 10.800000190734863 ]、fontSmoothingType = GRAY、fill = 0x585858ff]



テキスト[text = "2.00"、x = 0.0、y = 0.0、alignment = LEFT、origin = BASELINE、boundsType = LOGICAL、font = Font [name = System Regular、family = System、style = Regular、size = 10.800000190734863 ]、fontSmoothingType = GRAY、fill = 0x585858ff]



テキスト[text = "2.25"、x = 0.0、y = 0.0、alignment = LEFT、origin = BASELINE、boundsType = LOGICAL、font = Font [name = System Regular、family = System、style = Regular、size = 10.800000190734863 ]、fontSmoothingType = GRAY、fill = 0x585858ff]



テキスト[text =“ 2.50”、x = 0.0、y = 0.0、alignment = LEFT、origin = BASELINE、boundsType = LOGICAL、font = Font [name = System Regular、family = System、style = Regular、size = 10.800000190734863 ]、fontSmoothingType = GRAY、fill = 0x585858ff]



テキスト[text = "2.75"、x = 0.0、y = 0.0、alignment = LEFT、origin = BASELINE、boundsType = LOGICAL、font = Font [name = System Regular、family = System、style = Regular、size = 10.800000190734863 ]、fontSmoothingType = GRAY、fill = 0x585858ff]



テキスト[text = "3.00"、x = 0.0、y = 0.0、alignment = LEFT、origin = BASELINE、boundsType = LOGICAL、font = Font [name = System Regular、family = System、style = Regular、size = 10.800000190734863 ]、fontSmoothingType = GRAY、fill = 0x585858ff]



テキスト[text =“ 3.25”、x = 0.0、y = 0.0、alignment = LEFT、origin = BASELINE、boundsType = LOGICAL、font = Font [name = System Regular、family = System、style = Regular、size = 10.800000190734863 ]、fontSmoothingType = GRAY、fill = 0x585858ff]



NumberAxis @ 5a503aa1 [styleClass = axis]



ラベル@ 63297d6d [styleClass = label axis-label] ''



テキスト[text = ""、x = 0.0、y = 0.0、alignment = LEFT、origin = BASELINE、boundsType = LOGICAL_VERTICAL_CENTER、font = Font [name = System Regular、family = System、style = Regular、size = 13.0]、fontSmoothingType = LCD、塗りつぶし= 0x333333ff]



パス[要素= [MoveTo [x = 21.0、y = 319.0]、LineTo [x = 29.0、y = 319.0]、MoveTo [x = 21.0、y = 284.0]、LineTo [x = 29.0、y = 284.0]、MoveTo [x = 21.0、y = 248.0]、LineTo [x = 29.0、y = 248.0]、MoveTo [x = 21.0、y = 213.0]、LineTo [x = 29.0、y = 213.0]、MoveTo [x = 21.0、y = 177.0]、LineTo [x = 29.0、y = 177.0]、MoveTo [x = 21.0、y = 142.0]、LineTo [x = 29.0、y = 142.0]、MoveTo [x = 21.0、y = 106.0]、LineTo [ x = 29.0、y = 106.0]、MoveTo [x = 21.0、y = 71.0]、LineTo [x = 29.0、y = 71.0]、MoveTo [x = 21.0、y = 35.0]、LineTo [x = 29.0、y = 35.0]、MoveTo [x = 21.0、y = 0.0]、LineTo [x = 29.0、y = 0.0]]、fill = null、fillRule = NON_ZERO、stroke = 0xc3c3c3ff、strokeWidth = 1.0]



パス[elements = [MoveTo [x = 24.0、y = 312.0]、LineTo [x = 28.0、y = 312.0]、MoveTo [x = 24.0、y = 305.0]、LineTo [x = 28.0、y = 305.0]、MoveTo [x = 24.0、y = 298.0]、LineTo [x = 28.0、y = 298.0]、MoveTo [x = 24.0、y = 291.0]、LineTo [x = 28.0、y = 291.0]、MoveTo [x = 24.0、y = 276.0]、LineTo [x = 28.0、y = 276.0]、MoveTo [x = 24.0、y = 269.0]、LineTo [x = 28.0、y = 269.0]、MoveTo [x = 24.0、y = 262.0]、LineTo [ x = 28.0、y = 262.0]、MoveTo [x = 24.0、y = 255.0]、LineTo [x = 28.0、y = 255.0]、MoveTo [x = 24.0、y = 248.0]、LineTo [x = 28.0、y = 248.0]、MoveTo [x = 24.0、y = 241.0]、LineTo [x = 28.0、y = 241.0]、MoveTo [x = 24.0、y = 234.0]、LineTo [x = 28.0、y = 234.0]、MoveTo [x = 24.0、y = 227.0]、LineTo [x = 28.0、y = 227.0]、MoveTo [x = 24.0、y = 220.0]、LineTo [x = 28.0、y = 220.0]、MoveTo [x = 24.0、y = 206.0 ]、LineTo [x = 28.0、y = 206.0]、MoveTo [x = 24.0、y = 198.0]、LineTo [x = 28.0、y = 198.0]、MoveTo [x = 24.0、y = 191.0]、LineTo [x = 28.0、y = 191.0]、MoveTo [x = 24.0、y = 184.0]、LineTo [x = 28.0、y = 184.0]、MoveTo [x = 24.0、y = 170.0]、LineTo [x = 28.0、y = 170.0] 、MoveTo [x = 24.0、y = 163.0]、LineTo [x = 28.0、y = 163.0]、MoveTo [x = 24.0、y = 156.0]、LineTo [x = 2 8.0、y = 156.0]、MoveTo [x = 24.0、y = 149.0]、LineTo [x = 28.0、y = 149.0]、MoveTo [x = 24.0、y = 135.0]、LineTo [x = 28.0、y = 135.0] 、MoveTo [x = 24.0、y = 128.0]、LineTo [x = 28.0、y = 128.0]、MoveTo [x = 24.0、y = 121.0]、LineTo [x = 28.0、y = 121.0]、MoveTo [x = 24.0 、y = 113.0]、LineTo [x = 28.0、y = 113.0]、MoveTo [x = 24.0、y = 99.0]、LineTo [x = 28.0、y = 99.0]、MoveTo [x = 24.0、y = 92.0]、 LineTo [x = 28.0、y = 92.0]、MoveTo [x = 24.0、y = 85.0]、LineTo [x = 28.0、y = 85.0]、MoveTo [x = 24.0、y = 78.0]、LineTo [x = 28.0、 y = 78.0]、MoveTo [x = 24.0、y = 64.0]、LineTo [x = 28.0、y = 64.0]、MoveTo [x = 24.0、y = 57.0]、LineTo [x = 28.0、y = 57.0]、MoveTo [x = 24.0、y = 50.0]、LineTo [x = 28.0、y = 50.0]、MoveTo [x = 24.0、y = 43.0]、LineTo [x = 28.0、y = 43.0]、MoveTo [x = 24.0、y = 28.0]、LineTo [x = 28.0、y = 28.0]、MoveTo [x = 24.0、y = 21.0]、LineTo [x = 28.0、y = 21.0]、MoveTo [x = 24.0、y = 14.0]、LineTo [ x = 28.0、y = 14.0]、MoveTo [x = 24.0、y = 7.0]、LineTo [x = 28.0、y = 7.0]、MoveTo [x = 24.0、y = 0.0]、LineTo [x = 28.0、y = 0.0]]、fill = null、fillRule = NON_ZERO、stroke = 0xc3c3c3ff、strokeWidth = 1.0]



テキスト[text = "0,0"、x = 0.0、y = 0.0、alignment = LEFT、origin = BASELINE、boundsType = LOGICAL、font = Font [name = System Regular、family = System、style = Regular、size = 10.800000190734863 ]、fontSmoothingType = GRAY、fill = 0x585858ff]



テキスト[text =“ 0.5”、x = 0.0、y = 0.0、alignment = LEFT、origin = BASELINE、boundsType = LOGICAL、font = Font [name = System Regular、family = System、style = Regular、size = 10.800000190734863 ]、fontSmoothingType = GRAY、fill = 0x585858ff]



テキスト[text = "1.0"、x = 0.0、y = 0.0、alignment = LEFT、origin = BASELINE、boundsType = LOGICAL、font = Font [name = System Regular、family = System、style = Regular、size = 10.800000190734863 ]、fontSmoothingType = GRAY、fill = 0x585858ff]



テキスト[text =“ 1,5”、x = 0.0、y = 0.0、alignment = LEFT、origin = BASELINE、boundsType = LOGICAL、font = Font [name = System Regular、family = System、style = Regular、size = 10.800000190734863 ]、fontSmoothingType = GRAY、fill = 0x585858ff]



テキスト[text = "2.0"、x = 0.0、y = 0.0、alignment = LEFT、origin = BASELINE、boundsType = LOGICAL、font = Font [name = System Regular、family = System、style = Regular、size = 10.800000190734863 ]、fontSmoothingType = GRAY、fill = 0x585858ff]



テキスト[text = "2.5"、x = 0.0、y = 0.0、alignment = LEFT、origin = BASELINE、boundsType = LOGICAL、font = Font [name = System Regular、family = System、style = Regular、size = 10.800000190734863 ]、fontSmoothingType = GRAY、fill = 0x585858ff]



テキスト[text = "3.0"、x = 0.0、y = 0.0、alignment = LEFT、origin = BASELINE、boundsType = LOGICAL、font = Font [name = System Regular、family = System、style = Regular、size = 10.800000190734863 ]、fontSmoothingType = GRAY、fill = 0x585858ff]



テキスト[text =“ 3,5”、x = 0.0、y = 0.0、alignment = LEFT、origin = BASELINE、boundsType = LOGICAL、font = Font [name = System Regular、family = System、style = Regular、size = 10.800000190734863 ]、fontSmoothingType = GRAY、fill = 0x585858ff]



テキスト[text =“ 4.0”、x = 0.0、y = 0.0、alignment = LEFT、origin = BASELINE、boundsType = LOGICAL、font = Font [name = System Regular、family = System、style = Regular、size = 10.800000190734863 ]、fontSmoothingType = GRAY、fill = 0x585858ff]



テキスト[text = "4,5"、x = 0.0、y = 0.0、alignment = LEFT、origin = BASELINE、boundsType = LOGICAL、font = Font [name = System Regular、family = System、style = Regular、size = 10.800000190734863 ]、fontSmoothingType = GRAY、fill = 0x585858ff]



凡例@ 74020b4b [styleClass = chart-legend]



ラベル@ 1d725e97 [styleClass = label chart-legend-item] 'Temp1'



地域@ 15f4872 [styleClass = chart-legend-item-symbol chart-line-symbol series0 default-color0]



テキスト[text = "Temp1"、x = 0.0、y = 0.0、alignment = LEFT、origin = BASELINE、boundsType = LOGICAL_VERTICAL_CENTER、font = Font [name = System Regular、family = System、style = Regular、size = 13.0]、 fontSmoothingType = LCD、fill = 0x333333ff]



結果を分析すると、LineChartの構成要素を簡単に理解できます。







私の目標はグラフのすべてのノードを写真に置き換え、それぞれの上にポップアップメッセージを作成することだったので、ノードが配置されている部分が必要です。



写真の円を置き換える


通常のJavaFXでは、グラフノードは真ん中が空の円で表されます。 それらがどのように作成されるかを知るために、LineChartコードを少しクロールする必要があり(オープンRAWのOracleに感謝)、次のコードフラグメントを取得しました。



 private Node createSymbol(Series<X, Y> series, int seriesIndex, final Data<X,Y> item, int itemIndex) { Node symbol = item.getNode(); // check if symbol has already been created if (symbol == null && getCreateSymbols()) { symbol = new StackPane(); item.setNode(symbol); } // set symbol styles if (symbol != null) symbol.getStyleClass().addAll("chart-line-symbol", "series" + seriesIndex, "data" + itemIndex, series.defaultColorStyleClass); return symbol; }
      
      





ノードは、CSSを介して設定される通常のパネルであることがわかります。 ノードの構成に使用されるCSSコードを見つけます(/com/sun/javafx/scene/control/skin/caspian/caspian.cssにあります)。



 .chart-line-symbol { -fx-background-color: #f9d900, white; -fx-background-insets: 0, 2; -fx-background-radius: 5px; -fx-padding: 5px; }
      
      





つまり、変更するには、 chart-line-symbolクラスを再定義するだけで十分です。

次のCSSファイルを作成します。



 .chart-line-symbol { -fx-background-image: url(%  %); }
      
      





そして、このファイルをチャートに追加します。



 VBox vBox = new VBox(); LineChart chart = new LineChart(new NumberAxis(), new NumberAxis()); chart.getStylesheets().add(Main.class.getResource("  css ").toExternalForm()); chart.getData().add(new XYChart.Series<>("Temp1", FXCollections.observableArrayList(new XYChart.Data<Object, Object>(1, 1), new XYChart.Data<Object, Object>(2, 2), new XYChart.Data<Object, Object>(3, 4)))); vBox.getChildren().add(chart); primaryStage.setScene(new Scene(vBox)); primaryStage.show(); ((XYChart.Series) chart.getData().get(0)).getData().addAll(new XYChart.Data<>(5, 5));
      
      





結果は最初の写真で見ることができます。



ノードのツールチップ


CSSを使用しても機能しないため、この機能を追加するのは少し難しくなります。

LineChartでシンボルが作成されたコードの部分に戻りましょう。



 private Node createSymbol(Series<X, Y> series, int seriesIndex, final Data<X,Y> item, int itemIndex) { Node symbol = item.getNode(); // check if symbol has already been created if (symbol == null && getCreateSymbols()) { symbol = new StackPane(); item.setNode(symbol); } // set symbol styles if (symbol != null) symbol.getStyleClass().addAll("chart-line-symbol", "series" + seriesIndex, "data" + itemIndex, series.defaultColorStyleClass); return symbol; }
      
      





ご覧のとおり、シンボルはグラフポイントを設定するData <X、Y>オブジェクトに格納されます。

つまり、シリーズのすべてのポイントを簡単に確認して、全員にツールチップを設定できます。



 ObservableList<XYChart.Data> dataList = ((XYChart.Series) chart.getData().get(0)).getData(); dataList.forEach(data->{ Node node = data.getNode(); Tooltip tooltip = new Tooltip('('+data.getXValue().toString()+';'+data.getYValue().toString()+')'); Tooltip.install(node, tooltip); });
      
      





開始後、グラフノードをポイントし、結果を確認します。



おわりに



JavaFXでコンポーネントを構成する方法とその変更を示すことができたと思います。 もちろん、私が提示したことは機会に限定されません。 特に、LineChartに変更を加えて( 私がやったように )、色を動的に変更したり、ツールチップを追加したりできます。 背景、グリッド、軸、ラベルの外観を変更できます。 一般的に、あなたの心が望むように設定します。 主なことは、静的設定をCSSでレンダリングする必要があることと、残念ながらすべてのダイナミクスをコードでレンダリングする必要があることを覚えておくことです。



All Articles