更改图表颜色 | 更改图表颜色

本文介绍了更改图表颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I tested this css code to change chart color but I get NPE when I run the code:

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中使用它。

Can you tell me how I can fix this? This css code was used in AreaChart. Now I want to use it in LineChart.

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

I also tried this css from the example:

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

但我再次获得NPE。

推荐答案

请务必参考，用于以查看它支持的样式类。

在将css样式应用于节点之前，查找通常不可用。这至少意味着它必须被渲染到屏幕上，但似乎有时需要另一帧或两帧。因此，如果要使用查找，则必须在调用 stage.show（）; 后调用它，有时您需要采取进一步的步骤稍后再调用它。

更好的方法是使用外部样式表。请参阅：还有一个特定页面。

Make sure you refer to the css documentation for the type of node you are using to see which style classes it supports.
Lookups are generally not available until css styling has been applied to the node. This means, at the very least, that it must have been rendered to the screen, but it seems that on occasion it takes another frame or two. So, if you want to use a lookup, you must call it after you have called stage.show();, sometimes you need to take further steps to call it later.
A much better approach is to use an external style sheet. See the tutorial: there's also a specific page for styling charts.

更新（其他想法）：

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

In Java 8 (and maybe in JavaFX 2.2: I don't have a copy of caspian.css convenient), all the data-related colors are defined in terms of the lookup colors CHART_COLOR_1 through CHART_COLOR_8. This gives a nice one-liner to set the colors, at least:

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

这篇关于更改图表颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！