如何在JavaFX中创建动画LineChart?

时间:2016-08-24 14:38:17

标签: java javafx charts scenebuilder

我在SceneBuilder中创建了一个LineChart,我正在尝试研究如何将数据添加到它,以便它将被实时绘制。 在我的Controller课程中,我有:

    public class Controller {    
        ...    
        @FXML private LineChart<Number, Number> chart;
        @FXML private NumberAxis xAxis, yAxis;
        private XYChart.Series<Number, Number> series;
        private boolean run = true;
        ...

        public init() {
            xAxis.setAutoRanging(false);
            xAxis.setTickLabelsVisible(false);
            xAxis.setTickMarkVisible(false);
            xAxis.setMinorTickVisible(false);

            series = new XYChart.Series<Number, Number>();
            series.setName("Data plot"); 

            chart.setAnimated(false);
            chart.getData().addAll(series);           
        }  

        ...
        //When a button is clicked, a signal is sent to my server that starts a 
        //tracking application. Then it enters the while loop. This code
        //then makes requests to the server for data (getData()).
        //This is the data that I would like to display.
        @FXML
        private track() {
            connection.startTracking();

            Platform.runLater(new Runnable() {
                @Override
                public void run() {

                while(run) {
                    int[] data = connection.getData() //from somewhere else
                    dataManager.dataToSeries(data, series);

                    if(!series.getData.isEmpty()) {
                        chart.getData().retainAll();
                        chart.getData.addAll(series);
                    }
                }
            }
       }
  }    

以下是dataToSeries()

中的dataController方法
...
private void dataToSeries(int[] data, XYChart.Series<Number, Number> series) {
    int yValue = 0;
    int len = data.length;

    for (int i = 0; i < len; i++) {
        series.getData().add(new XYChart.Data<Number, Number>(data[i], yValue);  
        yValue++;
    }
 }

如果我在Controller中打印出该系列,我会得到我期望的数据,但它的格式如下:

Series: [Data[11,1,null], Data[16,2,null], Data[21,3,null]

有人可以解释为什么我的LineChart上没有显示这些数据吗?

2 个答案:

答案 0 :(得分:3)

您使用Runnable在应用程序线程上发布的Platform.runLater来阻止UI线程。

由于track()方法用@FXML注释,我怀疑它在fxml文件中用作EventHandler,因此无论如何都会在应用程序线程上运行,从而无需使用{ {1}}在应用程序线程上运行代码。

要不阻止UI线程,循环应该在非应用程序线程上运行,并且只应在应用程序线程上完成UI更新。此外,更新之间的休息小休息可能没有错。在这种情况下,Platform.runLater可以提供合适的计划:

示例ScheduledExecutorService代码:

Application

答案 1 :(得分:0)

基于rootFoder -> jdk.x.x.x -> demo -> javafx_samples charts执行Ensemble8.jar。

在应用程序中,转到LineChart部分并搜索@FXML private LineChart<Number, Number> lineChart; @FXML private NumberAxis xAxis; @FXML private NumberAxis yAxis; @Override public void initialize(URL location, ResourceBundle resources) { lineChart.setTitle("Stock Monitoring, 2010"); ObservableList<XYChart.Series<Number,Number>> dataChart = FXCollections.observableArrayList( new LineChart.Series("Serie 1",FXCollections.observableArrayList( new XYChart.Data<>(1,2), new XYChart.Data<>(5,3), new XYChart.Data<>(9,3), new XYChart.Data<>(2,7), new XYChart.Data<>(6,9), new XYChart.Data<>(1,2) )), new LineChart.Series<>("Series 2",FXCollections.observableArrayList( new XYChart.Data<>(5,7), new XYChart.Data<>(3,4), new XYChart.Data<>(8,2), new XYChart.Data<>(6,9), new XYChart.Data<>(1,3), new XYChart.Data<>(9,7) ))); lineChart.setData(dataChart);

你应该看到类似的东西 Java SE Development Demos and Samples Downloads

然后点击查看来源

以下是一个实现示例。

the "y" axis

例如,更改当前值为(x:5,y:3)的第一个列表Serie 1的第二个点的dataChart.get(0).getData().get(1).setYValue(9); 看起来像这样

demjson