图表：如何关联图表之间的颜色？

以下是一个例子

• 有两个图表可视化同一组数据
• 虽然数据相同，但它们的顺序不同（在动态发生的rw代码中）

目标：

• 在两个图表中显示相同颜色的相同数据

默认情况下，颜色按数据添加顺序应用。 找不到任何api来改变那些颜色 – 最有可能的是我错过了一些明显的东西，它是什么？

import java.util.List; import java.util.function.Supplier; import java.util.stream.Collector; import javafx.application.Application; import javafx.collections.FXCollections; import javafx.collections.ObservableList; import javafx.scene.Scene; import javafx.scene.chart.CategoryAxis; import javafx.scene.chart.NumberAxis; import javafx.scene.chart.PieChart; import javafx.scene.chart.PieChart.Data; import javafx.scene.chart.StackedBarChart; import javafx.scene.chart.XYChart; import javafx.scene.chart.XYChart.Series; import javafx.scene.layout.HBox; import javafx.stage.Stage; public class CorrelatedChartColors extends Application { @Override public void start(Stage primaryStage) { PieChart pieChart = new PieChart(); pieChart.setData(getPieData()); final CategoryAxis xAxis = new CategoryAxis(); final NumberAxis yAxis = new NumberAxis(); final StackedBarChart sbc = new StackedBarChart(xAxis, yAxis); ObservableList<Series> barData = createBarData(getPieData()); // simulate client code that re-orders/filters the data FXCollections.shuffle(barData); sbc.setData(barData); primaryStage.setTitle("Correlated Charts"); Scene scene = new Scene(new HBox(pieChart, sbc)); primaryStage.setScene(scene); primaryStage.show(); } /** * Creates and returns data for StackedBarChart from the given pieData. */ @SuppressWarnings("unchecked") private ObservableList<Series> createBarData( ObservableList pieChartData) { ObservableList<Series> data = pieChartData.stream() .map(p -> new XYChart.Data("none", (Number) p.getPieValue(), p.getName())) .map(xy -> new Series((String)xy.getExtraValue(), FXCollections.observableArrayList(xy))) .collect(toObservableList()) ; return data; } /** * Creates and returns data for PieChart. */ private ObservableList getPieData() { ObservableList pieData = FXCollections.observableArrayList(); pieData.addAll(new PieChart.Data("java", 17.56), new PieChart.Data("C", 17.06), new PieChart.Data("PHP", 6.0), new PieChart.Data("(Visual)Basic", 4.76), new PieChart.Data("Other", 31.37)); return pieData; } public static  Collector<T, ?, ObservableList> toObservableList() { return Collector.of((Supplier<ObservableList>) FXCollections::observableArrayList, List::add, (left, right) -> { left.addAll(right); return left; }); } public static void main(String[] args) { launch(args); } } 

截图：

Answer 1

我刚刚在start方法中更改了一些内容（加上一些导入我确定）。 我不认为这是最好的方式。 我会在user.dir中创建一个样式表，并用java-color等名称写我的颜色，然后将其用作默认的图表颜色。

 @Override public void start(Stage primaryStage) { PieChart pieChart = new PieChart(); pieChart.setData(getPieData()); final HashMap colors = new HashMap<>(); pieChart.getData().stream().forEach((pd)->{ colors.put(pd.getName(), pieChart.getData().indexOf(pd)); }); final CategoryAxis xAxis = new CategoryAxis(FXCollections.observableArrayList("none")); final NumberAxis yAxis = new NumberAxis(); final StackedBarChart sbc = new StackedBarChart<>(xAxis, yAxis); ObservableList> barData = createBarData(getPieData()); // simulate client code that re-orders/filters the data FXCollections.shuffle(barData); sbc.setData(barData); primaryStage.setTitle("Correlated Charts"); Scene scene = new Scene(new HBox(pieChart, sbc)); primaryStage.setScene(scene); primaryStage.show(); //can only get nodes after charts are drawn barData.stream().forEach((bd)->{ int num = colors.get(bd.getName()); //eg. chart-bar series1 data0 default-color1 bd.getData().get(0).getNode().getStyleClass().setAll("chart-bar","series"+num,"data0","default-color"+num); }); Legend legend = (Legend)sbc.lookup(".chart-legend"); legend.getChildrenUnmodifiable().stream().forEach((l)->{ Label label = (Label)l; Node n = label.getGraphic(); int num = colors.get(label.getText()); //eg. chart-legend-item-symbol chart-bar series1 bar-legend-symbol default-color1 n.getStyleClass().setAll("chart-legend-item-symbol","chart-bar","series"+num,"bar-legend-symbol","default-color"+num); }); } 

Answer 2

搞定了，这是代码：

 public class CorrelatedChartColors extends Application { @Override public void start(Stage primaryStage) { PieChart pieChart = new PieChart(); pieChart.setData(getPieData()); final CategoryAxis xAxis = new CategoryAxis(); final NumberAxis yAxis = new NumberAxis(); final StackedBarChart sbc = new StackedBarChart<>(xAxis, yAxis); xAxis.setCategories(FXCollections. observableArrayList(Arrays.asList("Programming Languages Usage in %"))); XYChart.Series series1 = new XYChart.Series(); XYChart.Series series2 = new XYChart.Series(); XYChart.Series series3 = new XYChart.Series(); XYChart.Series series4 = new XYChart.Series(); XYChart.Series series5 = new XYChart.Series(); series1.setName("Java"); series2.setName("C"); series3.setName("PHP"); series4.setName("(Visual)Basic"); series5.setName("Other"); series1.getData().add(new XYChart.Data("Programming Languages Usage in %", 17.56)); series2.getData().add(new XYChart.Data<>("Programming Languages Usage in %", 17.06)); series3.getData().add(new XYChart.Data<>("Programming Languages Usage in %", 6.0)); series4.getData().add(new XYChart.Data<>("Programming Languages Usage in %", 4.76)); series5.getData().add(new XYChart.Data<>("Programming Languages Usage in %", 31.37)); sbc.getData().addAll(series1, series2, series3, series4, series5); primaryStage.setTitle("Correlated Charts"); Scene scene = new Scene(new HBox(pieChart, sbc)); scene.getStylesheets().add(CorrelatedChartColors.class.getResource("chartStyles.css").toExternalForm()); primaryStage.setScene(scene); primaryStage.show(); } /** * Creates and returns data for StackedBarChart from the given pieData. */ @SuppressWarnings("unchecked") private ObservableList> createBarData( ObservableList pieChartData) { ObservableList> data = pieChartData.stream() .map(p -> new XYChart.Data<>("none", (Number) p.getPieValue(), p.getName())) .map(xy -> new Series<>((String)xy.getExtraValue(), FXCollections.observableArrayList(xy))) .collect(toObservableList()) ; return data; } /** * Creates and returns data for PieChart. */ private ObservableList getPieData() { ObservableList pieData = FXCollections.observableArrayList(); pieData.addAll(new PieChart.Data("java", 17.56), new PieChart.Data("C", 17.06), new PieChart.Data("PHP", 6.0), new PieChart.Data("(Visual)Basic", 4.76), new PieChart.Data("Other", 31.37)); return pieData; } public static  Collector> toObservableList() { return Collector.of((Supplier>) FXCollections::observableArrayList, ObservableList::add, (left, right) -> { left.addAll(right); return left; }); } public static void main(String[] args) { launch(args); } } 

然后是CSS文件的代码：

 .default-color3.chart-bar { -fx-bar-fill: black; } .default-color0.chart-pie { -fx-pie-color: black; } 

现在，您可以更改2个图表中任何一个图表中每个条形图的颜色。 如果要更改顶部栏的颜色，只需添加新的css条目即可

 .default-color0.chart-bar { -fx-bar-fill: green; }