如何在JavaFX中创建动画折线图？
我已经在SceneBuilder中创建了一个折线图，并且正在尝试了解如何将数据添加到该折线图中，以便能够实时绘制。 在我的如何在JavaFX中创建动画折线图？,java,javafx,charts,scenebuilder,Java,Javafx,Charts,Scenebuilder,我已经在SceneBuilder中创建了一个折线图，并且正在尝试了解如何将数据添加到该折线图中，以便能够实时绘制。 在我的Controller课程中，我有： public class Controller { ... @FXML private LineChart<Number, Number> chart; @FXML private NumberAxis xAxis, yAxis; priva
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);
}
}
}
}
}
控制器系列：[数据[11,1，空]、数据[16,2，空]、数据[21,3，空]有人能解释一下为什么这些数据没有显示在我的
折线图上吗？您正在使用Platform.runLater
在应用程序线程上发布的Runnable
阻止UI线程
由于track（）
方法是用@FXML
注释的，我怀疑它在FXML文件中用作EventHandler
，因此在应用程序线程上运行，这样就不必使用Platform.runLater
在应用程序线程上运行代码
为了不阻止UI线程，循环应该在非应用程序线程上运行，并且只有UI更新应该在应用程序线程上执行。此外，更新之间的小间隔可能不会出错。在这种情况下，ScheduledExecutorService
可以提供适当的计划：
示例应用程序
代码：
private final ScheduledExecutorService service = Executors.newSingleThreadScheduledExecutor();
private ScheduledFuture future;
private Random random = new Random();
private int[] getData() {
int[] result = new int[10];
for (int i = 0; i < result.length; i++) {
result[i] = random.nextInt(10);
}
return result;
}
private static void dataToSeries(int[] data, XYChart.Series<Number, Number> series) {
int len = data.length;
int size = series.getData().size();
if (size > len) {
series.getData().subList(len, series.getData().size()).clear();
} else if (size < len) {
for (; size < len; size++) {
series.getData().add(new XYChart.Data<>(0, size));
}
}
for (int i = 0; i < len; i++) {
series.getData().get(i).setXValue(data[i]);
}
}
@Override
public void start(Stage primaryStage) {
ToggleButton btn = new ToggleButton("updating");
btn.setSelected(false);
XYChart.Series<Number, Number> series = new XYChart.Series<>();
LineChart<Number, Number> chart = new LineChart<>(new NumberAxis(), new NumberAxis(), FXCollections.observableArrayList(series));
chart.setAnimated(false);
Runnable dataGetter = () -> {
try {
// simulate some delay caused by the io operation
Thread.sleep(100);
} catch (InterruptedException ex) {
}
int[] data = getData();
Platform.runLater(() -> {
// update ui
dataToSeries(data, series);
});
};
btn.selectedProperty().addListener((a, b, newValue) -> {
if (newValue) {
// update every second
future = service.scheduleWithFixedDelay(dataGetter, 0, 1, TimeUnit.SECONDS);
} else {
// stop updates
future.cancel(true);
future = null;
}
});
VBox root = new VBox(10, chart, btn);
Scene scene = new Scene(root);
primaryStage.setScene(scene);
primaryStage.show();
}
@Override
public void stop() throws Exception {
service.shutdownNow();
}
private final ScheduledExecutorService service=Executors.newSingleThreadScheduledExecutor（）；
私人计划未来；
私有随机=新随机（）；
私有int[]getData（）{
int[]结果=新的int[10]；
for（int i=0；i透镜）{
series.getData（）.subList（len，series.getData（）.size（））.clear（）；
}否则如果（尺寸<长度）{
对于（；大小{
试一试{
//模拟io操作引起的一些延迟
睡眠（100）；
}捕获（中断异常例外）{
}
int[]data=getData（）；
Platform.runLater（（）->{
//更新用户界面
数据系列（数据，系列）；
});
};
btn.selectedProperty（）.addListener（（a，b，newValue）->{
如果（新值）{
//每秒钟更新一次
future=service.scheduleWithFixedDelay（数据获取者，0，1，时间单位：秒）；
}否则{
//停止更新
future.cancel（true）；
future=null；
}
});
VBox根=新的VBox（10，图表，btn）；
场景=新场景（根）；
初级阶段。场景（场景）；
primaryStage.show（）；
}
@凌驾
public void stop（）引发异常{
service.shutdownNow（）；
}
基于rootFoder->jdk.x.x.x->demo->javafx_samples
执行Ensemble8.jar
在应用程序中，转到图表
部分并搜索折线图
你应该看到这样的东西
然后单击查看源
下面是一个实现示例
@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);
IDK如何调用addToChart
，但由于它包含一个无限循环，这很容易阻止UI线程阻止用户界面的任何更新。另一方面，如果它在不同的线程上运行，则您正在从非应用程序线程更新UI，这也很糟糕……抱歉，我将更新代码以使其更清晰。我试图省略不相关的代码我已经包含了addToChart（）
方法的描述，现在我将其改为track（）
（这是我程序中的实际名称）谢谢你的帮助。我想我明白你的意思了。我会尝试将你的建议整合到我的代码中。谢谢。这似乎有效。我没有意识到我正在阻止任何线程
@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);
dataChart.get(0).getData().get(1).setYValue(9);