图表：如何关联图表之间的颜色？ [英] Charts: How to correlate colors between charts?

问题描述

以下是一个示例

• 有两个可视化相同数据集的图表



$ b

目标：






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






默认情况下，颜色是通过添加数据的顺序应用的。找不到任何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应用程序{
 
 @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< String，Number> sbc = 
 new StackedBarChart<>（xAxis，yAxis）; 
 ObservableList< Series< String，Number>> barData = createBarData（getPieData（））; 
 //模拟重新排序/过滤数据的客户端代码
 FXCollections.shuffle（barData）; 
 sbc.setData（barData）; 
 
 primaryStage.setTitle（Correlated Charts）; 
场景scene = new Scene（new HBox（pieChart，sbc））; 
 primaryStage.setScene（scene）; 
 primaryStage.show（）; 
} 
 
 / ** 
 *从给定的pieData创建并返回StackedBarChart的数据。 
 * / 
 @SuppressWarnings（unchecked）
 private ObservableList< Series< String，Number> createBarData（
 ObservableList< Data> pieChartData）{
 ObservableList< Series< String，Number> data = pieChartData.stream（）
 .map（p  - > new XYChart.Data<>（none，（Number）p.getPieValue（），p.getName（）））
 .map（xy  - > new Series&（new）>（（String）xy.getExtraValue（），
 FXCollections.observableArrayList（xy）））
 .collect（toObservableList（））
; 
 return data; 
} 
 
 / ** 
 *创建并返回PieChart的数据。 
 * / 
 private ObservableList< Data> getPieData（）{
 ObservableList< Data> pieData = FXCollections.observableArrayList（）; 
 pieData.addAll（new PieChart.Data（java，17.56），
 new PieChart.Data（C，17.06），
 new PieChart.Data（PHP ），
 new PieChart.Data（（Visual）Basic，4.76），
 new PieChart.Data（Other，31.37） 
 return pieData; 
} 
 
 public static< T>收集器< T，？，ObservableList< T> toObservableList（）{
 return Collector.of（（Supplier< ObservableList< T>>）FXCollections :: observableArrayList，
 List :: add，
（left，right） 
 left.addAll（right）; 
 return left; 
}）; 
} 
 
 public static void main（String [] args）{
 launch（args）; 
} 
 
} 
  

屏幕截图：





解决方案

我只是改变了一些东西在start方法（加上一些导入我相信）。我不认为这是最好的方式。我将在user.dir中创建一个样式表，并用java-color等名称写入我的颜色，然后将其用于默认图表颜色。

  @Override 
 public void start（Stage primaryStage）{
 PieChart pieChart = new PieChart（）; 
 pieChart.setData（getPieData（））; 
 final HashMap< String，Integer> 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< String，Number> sbc = 
 new StackedBarChart<>（xAxis，yAxis）; 
 ObservableList< Series< String，Number>> barData = createBarData（getPieData（））; 
 //模拟重新排序/过滤数据的客户端代码
 FXCollections.shuffle（barData）; 
 sbc.setData（barData）; 
 
 primaryStage.setTitle（Correlated Charts）; 
场景scene = new Scene（new HBox（pieChart，sbc））; 
 primaryStage.setScene（scene）; 
 primaryStage.show（）; 
 
 //只能在绘制图表之后获取节点
 barData.stream（）。forEach（（bd） - > {
 int num = colors.get（bd。 getName（）; 
 //例如chart-bar series1 data0 default-color1 
 bd.getData（）。get（0）.getNode（）。getStyleClass（）。setAll ，series+ num，data0，default-color+ num）; 
} 
 
图例legend =（图例）sbc.lookup（。chart-legend）; 
 legend.getChildrenUnmodifiable（）。stream（）。forEach（（l） - > {
 Label label =（Label）l; 
 Node n = label.getGraphic $ b int num = colors.get（label.getText（））; 
 //例如：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）; 
} ; 
} 
  




Below is an example that

• has two charts visualizing the same set of data
• while the data are the same, their sequence differs (in rw code that would happen dynamically)

Goal:

• show the same data with the same colors in both charts

By default, colors are applied by sequence of addition of the data. Can't find any api to change those colors - most probably I'm missing something obvious, what is it?

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<String, Number> sbc =
                new StackedBarChart<>(xAxis, yAxis);
        ObservableList<Series<String, Number>> 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<String, Number>> createBarData(
            ObservableList<Data> pieChartData) {
        ObservableList<Series<String, Number>> 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<Data> getPieData() {
        ObservableList<Data> 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 <T>  Collector<T, ?, ObservableList<T>> toObservableList() {
        return Collector.of((Supplier<ObservableList<T>>) FXCollections::observableArrayList,
                List::add,
                (left, right) -> {
                    left.addAll(right);
                    return left;
                });
    }

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

}

Screenshot:

解决方案

I just changed some stuff in the start method (plus some imports I'm sure). I don't think this is the best way. I would make a stylesheet in user.dir and write my colors there with names like java-color etc., then use that for the default chart colors.

@Override
public void start(Stage primaryStage) {
    PieChart pieChart = new PieChart();
    pieChart.setData(getPieData());
    final HashMap<String, Integer> 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<String, Number> sbc =
            new StackedBarChart<>(xAxis, yAxis);
    ObservableList<Series<String, Number>> 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);
    });
}

这篇关于图表：如何关联图表之间的颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！