如何为JavaFX图表系列上色 [英] How to color JavaFX chart series

问题描述

如何设置左侧图表和右侧图表上的条形颜色?

比方说，左侧图表应具有所有绿色条，右侧图表应具有所有红色条.

我希望CSS是内联的，而不是放在单独的文件中.

 公共类SideBySideChart2扩展了Application {HBox根= new HBox();@Overridepublic void start(Stage primaryStage)引发异常{BarChart< String，Number>chartA = createChart();BarChart< String，Number>chartB = createChart();root.getChildren().addAll(chartA，chartB);场景场景=新场景(root，400，200);primaryStage.setScene(scene);primaryStage.setHeight(600);primaryStage.setWidth(400);primaryStage.show();populateCharts(chartA，chartB);}私人BarChart< String，Number>createChart(){最终的CategoryAxis xAxis = new CategoryAxis();最终的NumberAxis yAxis =新的NumberAxis(0，100，1);yAxis.setTickUnit(1);yAxis.setPrefWidth(35);yAxis.setMinorTickCount(10);yAxis.setTickLabelFormatter(new NumberAxis.DefaultFormatter(yAxis){@Overridepublic String toString(Number object){字符串标签；标签= String.format(％7.2f"，object.floatValue());返回标签；}});最后的BarChart< String，Number>chart = new BarChart< String，Number>(xAxis，yAxis);退货图表}私人无效populateCharts(BarChart< String，Number> chartA，BarChart< String，Number> chartB){XYChart.Series seriesA =新的XYChart.Series();seriesA.getData().add(new XYChart.Data("310"，100));seriesA.getData().add(new XYChart.Data("305"，4));seriesA.getData().add(new XYChart.Data("300"，2.5));chartA.getData().addAll(seriesA);XYChart.Series seriesB =新的XYChart.Series();seriesB.getData().add(new XYChart.Data("300"，1));seriesB.getData().add(new XYChart.Data("305"，4));seriesB.getData().add(new XYChart.Data("310"，2.5));chartB.getData().addAll(seriesB);}公共静态void main(String [] args){Application.launch(args);}} 

解决方案

一种方法是使用 CSS .有关参考，请参见

更新:

最简单的更新方法是遍历每个节点并设置其颜色.此代码应放在 populateCharts(chartA，chartB);

之后

  populateCharts(chartA，chartB);chartA.getData().get(0).getData().forEach((item)-> {item.getNode().setStyle(-fx-background-color:red");});chartB.getData().get(0).getData().forEach((item)-> {item.getNode().setStyle(-fx-background-color:green");}); 

How can I set the color of bars on the left chart and right charts?

Let's say left chart should have all green bars, and right chart all red bars.

I would prefer the CSS to be inline and not in a separate file.

public class SideBySideChart2 extends Application {

    HBox root = new HBox();

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

        BarChart<String, Number> chartA = createChart();
        BarChart<String, Number> chartB = createChart();

        root.getChildren().addAll(chartA, chartB);

        Scene scene = new Scene(root, 400, 200);
        primaryStage.setScene(scene);
        primaryStage.setHeight(600);
        primaryStage.setWidth(400);
        primaryStage.show();

        populateCharts(chartA, chartB);
    }

    private BarChart<String, Number> createChart() {
        final CategoryAxis xAxis = new CategoryAxis();
        final NumberAxis yAxis = new NumberAxis(0, 100, 1);
        yAxis.setTickUnit(1);
        yAxis.setPrefWidth(35);
        yAxis.setMinorTickCount(10);
        yAxis.setTickLabelFormatter(new NumberAxis.DefaultFormatter(yAxis) {
            @Override
            public String toString(Number object) {
                String label;
                label = String.format("%7.2f", object.floatValue());
                return label;
            }
        });

        final BarChart<String, Number> chart = new BarChart<String, Number>(xAxis, yAxis);

        return chart;
    }

    private void populateCharts(BarChart<String,Number> chartA, BarChart<String,Number> chartB) {

        XYChart.Series seriesA = new XYChart.Series();

        seriesA.getData().add(new XYChart.Data("310", 100));
        seriesA.getData().add(new XYChart.Data("305", 4));
        seriesA.getData().add(new XYChart.Data("300", 2.5));

        chartA.getData().addAll(seriesA);

        XYChart.Series seriesB = new XYChart.Series();

        seriesB.getData().add(new XYChart.Data("300", 1));
        seriesB.getData().add(new XYChart.Data("305", 4));
        seriesB.getData().add(new XYChart.Data("310", 2.5));

        chartB.getData().addAll(seriesB);
    }


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

} 

解决方案

One way you could do this is by using CSS. See this for reference. To make this work, you need to sort your data. Then add that sorted data to the chart. Then use CSS to set the color of the bars based on the position it is in the chart.

Main

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.BarChart;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class TestingGround extends Application
{

    HBox root = new HBox();

    @Override
    public void start(Stage primaryStage) throws Exception
    {
        BarChart<String, Number> chartA = createChart();
        BarChart<String, Number> chartB = createChart();

        root.getChildren().addAll(chartA, chartB);

        Scene scene = new Scene(root, 400, 200);
        scene.getStylesheets().add("testingground/chartcss.css");
        primaryStage.setScene(scene);
        primaryStage.setHeight(600);
        primaryStage.setWidth(400);
        primaryStage.show();

        populateCharts(chartA, chartB);
    }

    private BarChart<String, Number> createChart()
    {
        final CategoryAxis xAxis = new CategoryAxis();
        final NumberAxis yAxis = new NumberAxis(0, 100, 1);
        yAxis.setTickUnit(1);
        yAxis.setPrefWidth(35);
        yAxis.setMinorTickCount(10);
        yAxis.setTickLabelFormatter(new NumberAxis.DefaultFormatter(yAxis)
        {
            @Override
            public String toString(Number object)
            {
                String label;
                label = String.format("%7.2f", object.floatValue());
                return label;
            }
        });

        final BarChart<String, Number> chart = new BarChart(xAxis, yAxis);

        chart.setAlternativeRowFillVisible(false);
        chart.setLegendVisible(false);
        chart.setAnimated(false);

        chart.prefWidthProperty().bind(this.root.widthProperty().multiply(0.5));
        chart.prefHeightProperty().bind(this.root.heightProperty());
        chart.minHeightProperty().bind(this.root.heightProperty());

        // Set this so axis bounds can be set manually.
        yAxis.setAutoRanging(false);

        return chart;
    }

    private void populateCharts(BarChart<String, Number> chartA, BarChart<String, Number> chartB)
    {

        XYChart.Series seriesA = new XYChart.Series();

        //data sorted!
        seriesA.getData().add(new XYChart.Data("300", 2.5));
        seriesA.getData().add(new XYChart.Data("305", 4));
        seriesA.getData().add(new XYChart.Data("310", 100));



        chartA.getData().addAll(seriesA);

        XYChart.Series seriesB = new XYChart.Series();
        //sorted data!
        seriesB.getData().add(new XYChart.Data("300", 1));
        seriesB.getData().add(new XYChart.Data("305", 4));
        seriesB.getData().add(new XYChart.Data("310", 2.5));

        chartB.getData().addAll(seriesB);
    }

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

}

CSS

data0.chart-bar {
    -fx-background-color: #ffd700;
}
.data1.chart-bar {
    -fx-background-color: #ffa500;
}
.data2.chart-bar {
    -fx-background-color: #860061;
}

Results:

Update:

The simplest way to do the update is to loop through each node and set its color. This code should go after populateCharts(chartA, chartB);

    populateCharts(chartA, chartB);
    chartA.getData().get(0).getData().forEach((item) -> {
        item.getNode().setStyle("-fx-background-color: red");
    });
    chartB.getData().get(0).getData().forEach((item) -> {
        item.getNode().setStyle("-fx-background-color: green");
    });

这篇关于如何为JavaFX图表系列上色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！