JavaFx面积图绘制时零件填充错误

当我试图创建一个面积图时，我遇到了以下问题：绘图是在（据我所知）不应该填充的情况下用一部分面积填充的。 情节如下所示：

我希望情节是这样的：

我试图找到控制此行为的javafx或css属性，但没有找到。我发现的任何关于图表的教程似乎都不能强迫我做出我想要的行为——它通常是默认的

我还试图：

• 删除CSS类
• 将轴类型更改为

• 将绘图的父级更改为

  StackPane

• 更新JDK（至jdk1.8.0131）

但这并没有起到任何作用

我已尝试将数据打印到console以验证其格式是否正确：

02:00->17
05:00->13
08:00->14
11:00->15
14:00->17
17:00->17
20:00->16
23:00->12

但数据似乎不错

以下是创建绘图的代码：

package bug_reproduce;

import java.util.ArrayList;
import java.util.List;
import java.util.Random;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
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.scene.layout.StackPane;
import javafx.stage.Stage;

public class App extends Application {

    private static final String FXML_MAIN_TEMPLATE = "/fxml/MainPage.fxml";

    @Override
    public void start(Stage primaryStage) throws Exception {

        FXMLLoader loader = new FXMLLoader();
        Parent pane = loader.load(App.class.getResource(FXML_MAIN_TEMPLATE).openStream());

        StackPane hourly = (StackPane) pane.lookup("#hourly");

        Random rnd = new Random();
        List<Weather> list = new ArrayList<Weather>();
        for(int i = 0; i < 24; i+=3) {
            list.add(new Weather(i+":00", rnd.nextInt(15)+10));
        }

        hourly.getChildren().clear();
        createPlot(list, hourly);

        Scene myScene = new Scene(pane, 1280, 720);
        primaryStage.setScene(myScene);
        primaryStage.setTitle("Weather");
        primaryStage.setMinHeight(720);
        primaryStage.setMinWidth(1280);
        primaryStage.show();
    }

    public void createPlot(List<Weather> list, StackPane parent) {
        CategoryAxis xAxis = new CategoryAxis();
        NumberAxis yAxis = new NumberAxis();
        xAxis.setLabel("Hour");
        yAxis.setLabel("Temperature");

        AreaChart<String,Number> chart = new AreaChart<String,Number>(xAxis,yAxis);
        yAxis.forceZeroInRangeProperty().set(true);

        chart.setTitle("Hourly weather forecast");
        chart.getStyleClass().add("hourlyChart");
        chart.setLegendVisible(false);
        chart.setCreateSymbols(false);

        XYChart.Series series = new XYChart.Series();    
        for(Weather w : list) {
            String time = w.time;
            Number value = w.temperature;
            XYChart.Data datum = new XYChart.Data(time, value);
            series.getData().add(datum);
        }

        chart.getData().add(series);
        parent.getChildren().add(chart);
    }


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

}

样式表：

* {
    -fx-fill:WHITE;
    -fx-font-family: 'Open Sans', sans-serif;
}

#hourly {
    -fx-background-color:#736591;
}

.hourlyChart .chart-plot-background {
    -fx-background-color: transparent;
}

.hourlyChart .chart-vertical-grid-lines {
    -fx-stroke: transparent;
}

.hourlyChart .chart-horizontal-grid-lines {
    -fx-stroke: #fafafa;
}

.hourlyChart .chart-alternative-row-fill {
    -fx-fill: transparent;
    -fx-stroke: transparent;
    -fx-stroke-width: 0;
}

.hourlyChart .default-color0.chart-series-area-line { -fx-stroke: #00ccee; }
.hourlyChart .default-color0.chart-series-area-fill { -fx-fill: rgba(250,250,250,0.6) }

fxml文件：

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

<?import javafx.scene.layout.StackPane?>

<StackPane id="hourly" xmlns:fx="http://javafx.com/fxml/1" stylesheets="@/css/weather.css">

</StackPane>

无法复制此内容。CSS也没有给我任何类似于你在图片中发布的配色方案的东西。你能把它扩展成一个吗？@James_D Done，我试着尽可能多地删掉不相关的代码。代码是的，我现在看到了。看起来它是在图形的部分上绘制两次填充，因此

rgb（250250250）

的不透明度在覆盖两次的部分上是不同的（即，它应该是较浅的、接近白色的颜色，而不是较深的灰色）？@James_D我希望它看起来像我提供的第二幅图像中的一样（我刚刚用软件编辑了有缺陷的图像）。为什么还要在指定区域上方绘制填充物呢？这是我最不能理解的…我有一个想法。我添加了以下两行：

list.add（新天气（“0:00”，0））；

，

list.add（新天气（“24:00”，0））；

在循环之前和之后分别创建数据以“捕捉”绘图到X轴。它现在绘制。现在填充不会填充线条上方的区域（就像我希望的那样），但它完全忽略填充不透明度…什么。。。？

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

<?import javafx.scene.layout.StackPane?>

<StackPane id="hourly" xmlns:fx="http://javafx.com/fxml/1" stylesheets="@/css/weather.css">

</StackPane>