在 JavaFX 条形图中显示颜色时出现问题

Question

在我的项目中，我在同一帧中使用 abarchart和 a来显示相同​​的数据。但是，由于某种原因，我得到的输出中或linechart中都没有颜色。barchartlinechart

例如： 在此图像中， 是linechart有颜色的，但 是barchart没有颜色的。

我使用的代码：

FXML 文件：

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

<?import javafx.scene.chart.BarChart?>
<?import javafx.scene.chart.CategoryAxis?>
<?import javafx.scene.chart.LineChart?>
<?import javafx.scene.chart.NumberAxis?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane id="AnchorPane" prefHeight="401.0" prefWidth="802.0" style="-fx-background-color: white;" stylesheets="@stylesheet.css" xmlns="http://javafx.com/javafx/16" xmlns:fx="http://javafx.com/fxml/1" fx:controller="javafxapplication26.FXMLDocumentController">
   <children>
      <AnchorPane layoutX="1.0" layoutY="14.0" prefHeight="303.0" prefWidth="801.0" AnchorPane.bottomAnchor="46.0" AnchorPane.leftAnchor="1.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="14.0">
         <children>
            <AnchorPane layoutX="342.0" layoutY="-2.0" prefHeight="244.0" prefWidth="419.0" style="-fx-border-color: #4E6172; -fx-background-color: white;" AnchorPane.bottomAnchor="10.0" AnchorPane.rightAnchor="10.0" AnchorPane.topAnchor="-2.0">
               <children>
                  <LineChart fx:id="linechart" layoutX="69.0" layoutY="11.0" prefHeight="353.0" prefWidth="380.0">
                    <xAxis>
                      <CategoryAxis side="BOTTOM" />
                    </xAxis>
                    <yAxis>
                      <NumberAxis side="LEFT" />
                    </yAxis>
                  </LineChart>
               </children>
            </AnchorPane>
            <AnchorPane layoutX="8.0" layoutY="-2.0" prefHeight="367.0" prefWidth="392.0" style="-fx-border-color: #4E6172; -fx-background-color: white;" AnchorPane.bottomAnchor="10.0" AnchorPane.leftAnchor="10.0" AnchorPane.rightAnchor="399.0" AnchorPane.topAnchor="-2.0">
               <children>
                  <BarChart fx:id="barchart" layoutX="3.0" layoutY="3.0" prefHeight="363.0" prefWidth="391.0" AnchorPane.bottomAnchor="1.0" AnchorPane.leftAnchor="1.0" AnchorPane.rightAnchor="1.0" AnchorPane.topAnchor="2.0">
                    <xAxis>
                      <CategoryAxis side="BOTTOM" />
                    </xAxis>
                    <yAxis>
                      <NumberAxis side="LEFT" />
                    </yAxis>
                  </BarChart>
               </children>
            </AnchorPane>
         </children>
      </AnchorPane>
   </children>
</AnchorPane>

Java控制器：

/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
package javafxapplication26;

import java.net.URL;
import java.util.ResourceBundle;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.chart.BarChart;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.XYChart;
import javafx.scene.control.Button;
import javafx.scene.control.Label;

/**
 *
 * @author param
 */
public class FXMLDocumentController implements Initializable {
    
  
    
    @FXML
    private LineChart<String, Number> linechart;
    @FXML
    private BarChart<String, Number> barchart;
    
   
    @Override
    public void initialize(URL url, ResourceBundle rb) {
         XYChart.Series<String, Number> series= new  XYChart.Series<String, Number>();
        series.getData().add(new  XYChart.Data<String, Number>("Jan",12));
        series.getData().add(new  XYChart.Data<String, Number>("Feb",20));
        series.getData().add(new  XYChart.Data<String, Number>("March",10));
        series.getData().add(new  XYChart.Data<String, Number>("April",14));
    
      
        linechart.getData().add(series);
        barchart.getData().add(series);
        
      
        // TODO
    }      
} 
}

如图所示，只有 或 之一barchart能够linechart显示颜色。我尝试使用该-fx-bar-fill方法，但即使这样也不起作用。

Answer 1

正如 @kleopatra 和 @Slaw 提到的，问题是我Series对barchart和 都使用了一个linechart。这就是错误的原因。

解决方案是使用两个不同的Series，标题分别为series1和。series2barchartlinechart

更正后的代码：

package javafxapplication26;

import java.net.URL;
import java.util.ResourceBundle;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.chart.BarChart;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.XYChart;
import javafx.scene.control.Button;
import javafx.scene.control.Label;

/**
 *
 * @author param
 */
public class FXMLDocumentController implements Initializable {
    
  
    
    @FXML
    private LineChart<String, Number> linechart;
    @FXML
    private BarChart<String, Number> barchart;
    
   
    @Override
    public void initialize(URL url, ResourceBundle rb) {
        XYChart.Series<String, Number> series= new  XYChart.Series<String, Number>(); //For the barchart
        series.getData().add(new  XYChart.Data<String, Number>("Jan",12));
        series.getData().add(new  XYChart.Data<String, Number>("Feb",20));
        series.getData().add(new  XYChart.Data<String, Number>("March",10));
        series.getData().add(new  XYChart.Data<String, Number>("April",14));
    
        XYChart.Series<String, Number> series2= new  XYChart.Series<String, Number>(); //For the linechart
        series2.getData().add(new  XYChart.Data<String, Number>("Jan",12));
        series2.getData().add(new  XYChart.Data<String, Number>("Feb",20));
        series2.getData().add(new  XYChart.Data<String, Number>("March",10));
        series2.getData().add(new  XYChart.Data<String, Number>("April",14));
        
        
        barchart.getData().add(series);   
        linechart.getData().add(series2);

    }     
}

正如@Slaw 提到的，问题是每个barchartor 都linechart 需要有它自己的Seriesand Data。这是因为每个XYChart.Series和 都XYChart.Data提供Node与它们相关的内容，这就是图表中显示的内容。

修正后的输出：