Question

我测试了这个css代码来改变图表颜色，但是当我运行代码时我得到了NPE：

public class MainApp extends Application {

    @Override public void start(Stage stage) {
        stage.setTitle("Line Chart Sample");
        //defining the axes
        final NumberAxis xAxis = new NumberAxis();
        final NumberAxis yAxis = new NumberAxis();
        xAxis.setLabel("Number of Month");
        //creating the chart
        final LineChart<Number,Number> lineChart = new LineChart<>(xAxis,yAxis);


        // Look up first series fill
        Node node = lineChart.lookup(".default-color0.chart-series-area-fill");
        // Set the first series fill to translucent pale green
        node.setStyle("-fx-fill: linear-gradient(#f2f2f2, #d4d4d4);"
            + "  -fx-background-insets: 0 0 -1 0, 0, 1, 2;"
            + "  -fx-background-radius: 3px, 3px, 2px, 1px;");

        Node nodew = lineChart.lookup(".chart-series-area-line");
        // Set the first series fill to translucent pale green
        nodew.setStyle("-fx-stroke: #989898; -fx-stroke-width: 1px; ");



        lineChart.setTitle("Stock Monitoring, 2010");
        //defining a series
        XYChart.Series series = new XYChart.Series();
        series.setName("My portfolio");
        //populating the series with data
        series.getData().add(new XYChart.Data(1, 23));
        series.getData().add(new XYChart.Data(2, 14));
        series.getData().add(new XYChart.Data(3, 15));
        series.getData().add(new XYChart.Data(4, 24));
        series.getData().add(new XYChart.Data(5, 34));
        series.getData().add(new XYChart.Data(6, 36));
        series.getData().add(new XYChart.Data(7, 22));
        series.getData().add(new XYChart.Data(8, 45));
        series.getData().add(new XYChart.Data(9, 43));
        series.getData().add(new XYChart.Data(10, 17));
        series.getData().add(new XYChart.Data(11, 29));
        series.getData().add(new XYChart.Data(12, 25));

        Scene scene  = new Scene(lineChart,800,600);
        lineChart.getData().add(series);

        stage.setScene(scene);
        stage.show();
    }

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

}

这一行是问题所在：

node.setStyle("-fx-fill: linear-gradient(#f2f2f2, #d4d4d4);".........);

你能告诉我怎么解决这个问题吗？这个css代码在AreaChart中使用。现在我想在LineChart中使用它。

P.S

我也从示例中尝试了这个css：

http://docs.oracle.com/javafx/2/charts/css-styles.htm

Node node = lineChart.lookup(".default-color0.chart-series-line");
        // Set the first series fill to translucent pale green
        node.setStyle("-fx-stroke: #e9967a;");

但我再次获得NPE。

Answer 1

请务必参考css documentation的type of node you are using，了解它支持的样式类。
在将css样式应用于节点之前，查找通常不可用。这至少意味着它必须已经渲染到屏幕上，但似乎有时需要另一帧或两帧。因此，如果您想使用查找，则必须在调用stage.show();后调用它，有时您需要采取进一步的步骤稍后再调用它。
更好的方法是使用外部样式表。请参阅tutorial：还有styling charts的特定页面。

更新（其他想法）：

在Java 8中（也许在JavaFX 2.2中：我没有方便的caspian.css副本），所有与数据相关的颜色都是根据lookup colors CHART_COLOR_1来定义的CHART_COLOR_8。这给了一个很好的单行来设置颜色，至少：

lineChart.setStyle("CHART_COLOR_1: #e9967a;");

Answer 2

在显示舞台后，您必须查找节点。

public class MainApp extends Application { @Override public void start(Stage stage) { stage.setTitle("Line Chart Sample"); //defining the axes final NumberAxis xAxis = new NumberAxis(); final NumberAxis yAxis = new NumberAxis(); xAxis.setLabel("Number of Month"); //creating the chart final LineChart<Number,Number> lineChart = new LineChart<>(xAxis,yAxis); lineChart.setTitle("Stock Monitoring, 2010"); //defining a series XYChart.Series series = new XYChart.Series(); series.setName("My portfolio"); //populating the series with data series.getData().add(new XYChart.Data(1, 23)); series.getData().add(new XYChart.Data(2, 14)); series.getData().add(new XYChart.Data(3, 15)); series.getData().add(new XYChart.Data(4, 24)); series.getData().add(new XYChart.Data(5, 34)); series.getData().add(new XYChart.Data(6, 36)); series.getData().add(new XYChart.Data(7, 22)); series.getData().add(new XYChart.Data(8, 45)); series.getData().add(new XYChart.Data(9, 43)); series.getData().add(new XYChart.Data(10, 17)); series.getData().add(new XYChart.Data(11, 29)); series.getData().add(new XYChart.Data(12, 25)); Scene scene = new Scene(lineChart,800,600); lineChart.getData().add(series); stage.setScene(scene); stage.show(); // Look up first series fill Node node = lineChart.lookup(".default-color0.chart-series-area-fill"); // Set the first series fill to translucent pale green node.setStyle("-fx-fill: linear-gradient(#f2f2f2, #d4d4d4);" + " -fx-background-insets: 0 0 -1 0, 0, 1, 2;" + " -fx-background-radius: 3px, 3px, 2px, 1px;"); Node nodew = lineChart.lookup(".chart-series-area-line"); // Set the first series fill to translucent pale green nodew.setStyle("-fx-stroke: #989898; -fx-stroke-width: 1px; "); } public static void main(String[] args) { launch(args); } }

更改图表颜色

2 个答案: