Question

我想为这个简单的图表添加进度条。我在互联网上找不到合适的例子。

import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.chart.AreaChart;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.stage.Stage;

public class MainApp extends Application
{

    @Override
    public void start(Stage stage)
    {

        setUserAgentStylesheet(STYLESHEET_CASPIAN);

        Scene scene = new Scene(chart(), 800, 600);

        stage.setScene(scene);
        stage.show();
    }

    private XYChart.Series series;

    private AreaChart<String, Number> chart()
    {
        CategoryAxis xAxis = new CategoryAxis();

        NumberAxis yAxis = new NumberAxis();

        // Chart
        final AreaChart<String, Number> sc = new AreaChart<>(xAxis, yAxis);

        sc.setCreateSymbols(false);

        sc.setPrefSize(1200, 210);

        series = new AreaChart.Series<>();
        series.setName("Area Chart Series");
        sc.getData().add(series);

        Node node = sc.lookup(".default-color0.chart-series-area-fill");
        node.setStyle("-fx-fill: linear-gradient(#f2f2f2, #d4d4d4);"
            + "  -fx-background-insets: 0 0 -1 0, 0, 1, 2;"
            + "  -fx-background-radius: 3px, 3px, 2px, 1px;");

        Node nodew = sc.lookup(".chart-series-area-line");
        nodew.setStyle("-fx-stroke: #989898; -fx-stroke-width: 1px; ");

        series.getData().add(new AreaChart.Data("Monday", 23));
        series.getData().add(new AreaChart.Data("Tuesday", 234));
        series.getData().add(new AreaChart.Data("Wednesday", 54));
        series.getData().add(new AreaChart.Data("Thursday", 565));
        series.getData().add(new AreaChart.Data("Friday", 78));
        series.getData().add(new AreaChart.Data("Saturday", 35));
        series.getData().add(new AreaChart.Data("Sunday", 65));

        return sc;
    }

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

}

例如，我想在图表利用期间显示加载。

有没有可以使用的例子？

Answer 1

简短回答：你不能。

答案很长：没有任何公共API可以了解图表加载进度。另外，我非常怀疑你在图表中有这么多数据，它需要一个进度条。

解决方案：我想你想要视觉效果的进度条。只需创建一个包含进度条和图表的StackPane，当进度条到达结尾时，将图表放在前面。真的很容易。

某些代码呢？我认为我对规范非常清楚。真的没什么可说的。没有隐藏的解决方案，您无法在互联网上找到。

Answer 2

只需在绘制图表后添加系列数据。图表默认启用动画，因此您可以观看正在绘制的动画。观看非常酷，我可以自己使用它。

public class DelayChart extends Application {
    @Override
    public void start(Stage stage) {

        setUserAgentStylesheet(STYLESHEET_CASPIAN);

        CategoryAxis xAxis = new CategoryAxis();
        NumberAxis yAxis = new NumberAxis();

        final AreaChart<String, Number> sc = new AreaChart<>(xAxis, yAxis);
        sc.setCreateSymbols(false);
        sc.setPrefSize(1200, 210);

        XYChart.Series series = new AreaChart.Series<>();
        series.setName("Area Chart Series");
        sc.getData().add(series);

        Node node = sc.lookup(".default-color0.chart-series-area-fill");
        node.setStyle("-fx-fill: linear-gradient(#f2f2f2, #d4d4d4);"
                + "  -fx-background-insets: 0 0 -1 0, 0, 1, 2;"
                + "  -fx-background-radius: 3px, 3px, 2px, 1px;");

        Node nodew = sc.lookup(".chart-series-area-line");
        nodew.setStyle("-fx-stroke: #989898; -fx-stroke-width: 1px; ");

        Scene scene = new Scene(sc, 800, 600);
        stage.setScene(scene);
        stage.show();

        //add longer delays here if you want
        series.getData().add(new AreaChart.Data("Monday", 23));
        series.getData().add(new AreaChart.Data("Tuesday", 234));
        series.getData().add(new AreaChart.Data("Wednesday", 54));
        series.getData().add(new AreaChart.Data("Thursday", 565));
        series.getData().add(new AreaChart.Data("Friday", 78));
        series.getData().add(new AreaChart.Data("Saturday", 35));
        series.getData().add(new AreaChart.Data("Sunday", 65));

    }
}

带有进度条的折线图

2 个答案: