Горизонтальный список диаграмм JavaFX

Question

Я разрабатываю программное обеспечение для сравнения различных объемов данных, и я хочу использовать диаграммы для их отображения горизонтальным способом. Для меня важно отображать только 3 диаграммы на одной стороне. Если их больше 3, пользователь должен перейти к другим диаграммам.

Answer 1

Это не будет выглядеть так же, как этот рис, я слишком ленив для CSS. Идея состоит в том, чтобы поместить все диаграммы в GridPane внутри ScrollPane. Свяжите диаграммы так, чтобы ширина составляла ровно 1/3 ширины TabPane.

Я использовал FXML, так как легче создать сцену.

FXMLDocument.fxml

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

<?import java.lang.*?> 
<?import java.util.*?> 
<?import javafx.scene.*?> 
<?import javafx.scene.control.*?> 
<?import javafx.scene.layout.*?> 

<TabPane fx:id="tabPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" tabClosingPolicy="UNAVAILABLE" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8" fx:controller="horizcharts.FXMLDocumentController"> 
    <tabs> 
    <Tab text="Main View"> 
     <content> 
     <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0"> 
       <children> 
        <Button layoutX="181.0" layoutY="112.0" mnemonicParsing="false" onAction="#addChart" text="Add Chart" /> 
       </children></AnchorPane> 
     </content> 
    </Tab> 
    <Tab text="Compare"> 
     <content> 
      <ScrollPane maxWidth="1.7976931348623157E308"> 
       <content> 
        <GridPane fx:id="grid" gridLinesVisible="true"> 
        </GridPane> 
       </content> 
      </ScrollPane> 
     </content> 
    </Tab> 
    </tabs> 
</TabPane> 

FXMLDocumentController.java

package horizcharts; 

import java.net.URL; 
import java.util.ResourceBundle; 
import javafx.event.ActionEvent; 
import javafx.fxml.FXML; 
import javafx.fxml.Initializable; 
import javafx.scene.chart.BarChart; 
import javafx.scene.chart.CategoryAxis; 
import javafx.scene.chart.NumberAxis; 
import javafx.scene.control.Label; 
import javafx.scene.control.TabPane; 
import javafx.scene.layout.GridPane; 
import javafx.scene.layout.VBox; 


public class FXMLDocumentController implements Initializable { 

    @FXML GridPane grid; 
    @FXML TabPane tabPane; 
    private int numCharts = 0; 

    @FXML private void addChart(ActionEvent event) { 
     VBox vb = randChart(numCharts); 
     GridPane.setConstraints(vb, numCharts++,0); 
     grid.getChildren().add(vb); 
    } 

    private VBox randChart(int num){ 
     CategoryAxis xAxis = new CategoryAxis(); 
     NumberAxis yAxis = new NumberAxis(); 
     BarChart<String, Number> bc = new BarChart(xAxis, yAxis); 
     BarChart.Series<String, Number> series = new BarChart.Series<>(); 
     series.setName("Bar Chart "+num); 
     bc.getData().add(series); 
     for (int i = 0; i<5; i++){ 
      series.getData().add(new BarChart.Data("cat "+i, Math.random()*10*i)); 
     } 
     bc.prefWidthProperty().bind(tabPane.widthProperty().subtract(6).divide(3)); 
     bc.prefHeightProperty().bind(tabPane.heightProperty().subtract(180));//guess heights 
     VBox vb = new VBox(5,new Label("Version "+num), bc, new Label("precision"), new Label("recall")); 
     return vb; 
    } 

    @Override 
    public void initialize(URL url, ResourceBundle rb) { 
    }  

} 

Regular основной класс HorizCharts.java.

package horizcharts; 

import javafx.application.Application; 
import javafx.fxml.FXMLLoader; 
import javafx.scene.Parent; 
import javafx.scene.Scene; 
import javafx.stage.Stage; 

public class HorizCharts extends Application { 

    @Override 
    public void start(Stage stage) throws Exception { 
     Parent root = FXMLLoader.load(getClass().getResource("FXMLDocument.fxml")); 
     Scene scene = new Scene(root); 
     stage.setScene(scene); 
     stage.show(); 
    } 

    public static void main(String[] args) { launch(args); } 
}