JavaFX折线图无法绘制且数据顺序异常问题求助

一、数据乱序问题修复 #

1. 修正数据读取逻辑 #

原prepareDataToDraw方法中，当数据行数超过5时，循环仅会读取最后一行数据，导致图表数据缺失且逻辑错误。同时，drawChart方法未正确填充日期列表，CategoryAxis会自动按字符串排序日期，引发乱序。

修正后的prepareDataToDraw方法：

public ArrayList<ArrayList<String>> prepareDataToDraw() {
    ArrayList<ArrayList<String>> data = new ArrayList<>();

    if (lines.size() > 5) {
        // 读取最近5条数据，而非仅最后一行
        for(int i = lines.size() - 5; i < lines.size(); i++) {
            String[] tmpStr = lines.get(i).split(" ");
            ArrayList<String> tmpBlock = new ArrayList<>();
            tmpBlock.add(tmpStr[0]);
            tmpBlock.add(tmpStr[2]);
            tmpBlock.add(tmpStr[3]);
            tmpBlock.add(tmpStr[4]);
            data.add(tmpBlock);
        }
    } else {
        for (String line : lines) {
            String[] tmpStr = line.split(" ");
            ArrayList<String> tmpBlock = new ArrayList<>();
            tmpBlock.add(tmpStr[0]);
            tmpBlock.add(tmpStr[2]);
            tmpBlock.add(tmpStr[3]);
            tmpBlock.add(tmpStr[4]);
            data.add(tmpBlock);
        }
    }
    return data;
}

2. 修正图表绘制逻辑 #

在drawChart中填充日期列表，强制x轴按数据原始顺序显示，同时清空旧数据避免重复绘制：

public void drawChart() {
    chart.setTitle("汇率变化趋势");
    chart.setAxisSortingPolicy(LineChart.SortingPolicy.NONE);
    xAxis.setLabel("日期");
    yAxis.setLabel("汇率");
    dates.clear();
    cures.clear();
    ArrayList<ArrayList<String>> data = par.prepareDataToDraw();

    // 按数据顺序填充日期列表，确保x轴顺序正确
    for(ArrayList<String> row : data) {
        dates.add(row.get(0));
    }
    xAxis.setCategories(dates);

    // 清空旧数据，避免重复绘制系列
    chart.getData().clear();

    ArrayList<XYChart.Series> listSeries = new ArrayList<>();
    // 确保items索引对应美元、欧元、兹罗提的列
    for (int i = 1; i < items.size(); i++) {
        XYChart.Series tmpSeries = new XYChart.Series();
        tmpSeries.setName(items.get(i));
        for (int j = 0; j < data.size(); j++) {
            tmpSeries.getData().add(new XYChart.Data(data.get(j).get(0), Double.parseDouble(data.get(j).get(i))));
        }
        chart.getData().add(tmpSeries);
    }
}

二、图表显示异常修复 #

原FXML中LineChart未设置尺寸约束，导致窗口显示异常。需添加尺寸属性并优化GridPane布局：

修正后的FXML图表部分：

<GridPane hgap="15" vgap="15" xmlns="http://javafx.com/javafx/16" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.example.demo.HelloController">
    <!-- 添加列约束，让第二列自适应宽度 -->
    <columnConstraints>
        <ColumnConstraints/>
        <ColumnConstraints hgrow="ALWAYS"/>
    </columnConstraints>
    
    <!-- 其他控件省略 -->
    
    <LineChart fx:id="chart" GridPane.rowIndex="10" GridPane.columnIndex="2"
               prefWidth="600" prefHeight="400">
        <xAxis>
            <CategoryAxis fx:id="xAxis"/>
        </xAxis>
        <yAxis>
            <NumberAxis fx:id="yAxis"/>
        </yAxis>
    </LineChart>
</GridPane>

内容的提问来源于stack exchange，提问作者Kerby3