面积图中的颜色变化 [英] Color Change in Area Chart

问题描述

我有一个Java类扩展AreaChart。我想实现一个方法，使或多或少的像这样：

  public void addNewColorToData（xCoordinate，yCoordinate，redColor ，greenColor，blueColor）; 
  

- >函数应该获得xCoordinate，yCoordinate的数据参数，代表线的值。

是否可以使用Inline-Styles为此创建一个新的颜色？

在这里您可以看到一个示例。有很多颜色填充的面积图！
是否有可能添加一些新的颜色？

我需要在CSS中添加一个这样的内联样式：

  .default-color0.chart-series-area-fill {-fx-fill：＃007Fc350; } 
  
 
 
 
感谢您的帮助
解决方案
根据此答案，要基于r，g创建内联样式， b参数（给定从0到255的整数），您只需要覆盖 CHART_COLOR_1 （最多 CHART_COLOR_8 ）值修改线颜色和 CHART_COLOR_1_TRANS_20 （最多 CHART_COLOR_8_TRANS_20 ）修改区域颜色：
  private AreaChart< String，Number> areaChart; 
 
 private void changeColor（int redColor，int greenColor，int blueColor，double opacity）{
 / * int redColor = 0，greenColor = 127，blueColor = 195; 
 double opacity = 0.4; 
 * / 
 areaChart.setStyle（CHART_COLOR_1：rgb（+ redColor +，+ greenColor +，+ blueColor +）;+ 
CHART_COLOR_1_TRANS_20：rgba（+ redColor + ，+ greenColor +，+ blueColor +）;）; 
} 
  
  EDIT  
 
 
为了清楚起见，我添加了这个简短的MVCE：
  @Override 
 public void start（Stage primaryStage）{
 AreaChart< String，Number> areaChart = new AreaChart<>（new CategoryAxis（），new NumberAxis（））; 
 
 ObservableList< XYChart.Data< String，Integer>> xyList 
 = FXCollections.observableArrayList（
 new XYChart.Data<>（P1，30），
 new XYChart.Data（P2，40） $ b new XYChart.Data<>（P3，30））; 
 XYChart.Series series = new XYChart.Series（xyList）; 
 areaChart.getData（）。addAll（series）; 
 
按钮button = new按钮（更改样式）; 
 button.setOnAction（e-> {
 int redColor = 0，greenColor = 127，blueColor = 195; 
 double opacity = 0.3; 
 areaChart.setStyle（CHART_COLOR_1： rgb（+ redColor +，+ greenColor +，+ blueColor +）;
 +CHART_COLOR_1_TRANS_20：rgba（+ redColor +，+ greenColor +，+ blueColor +，+ opacity + ）; 
}）; 
 
 VBox root = new VBox（5，button，areaChart）; 
场景scene = new Scene（root，400，300）; 
 primaryStage.setScene（scene）; 
 primaryStage.show（）; 
} 
  
这将是结果：
 
 
 
  
 
i have a Java-Class that extends the AreaChart. There i would like to implement a method that makes more or less something like this:
public void addNewColorToData(xCoordinate, yCoordinate, redColor, greenColor, blueColor);
-> The Function should get the parameters of the Data for the xCoordinate, yCoordinate and then for the RGB Value of the representes Line. 

Is it possible to create with Inline-Styles a new Color for this ?



Here you can see a Sample. There are a lot of Color-Fills for the Area Chart!
Is it possible to add there some new colors?

I need to add a Inline Style stuff like this in CSS:
.default-color0.chart-series-area-fill { -fx-fill: #007Fc350; }
Thank you for your help
解决方案
Based on this answer, to create an inline style based on r,g,b parameters (given these are integers from 0 to 255) you just need to override the CHART_COLOR_1 (up to CHART_COLOR_8) value to modify the line color and CHART_COLOR_1_TRANS_20 (up to CHART_COLOR_8_TRANS_20) to modify the area color:
private AreaChart<String, Number> areaChart;

private void changeColor(int redColor, int greenColor, int blueColor, double opacity){
    /* int redColor=0, greenColor=127, blueColor=195; 
       double opacity=0.4;
    */
    areaChart.setStyle("CHART_COLOR_1: rgb("+redColor+","+greenColor+","+blueColor+");" +
           "CHART_COLOR_1_TRANS_20: rgba("+redColor+","+greenColor+","+blueColor+");");
}
EDIT

I'm adding this short MVCE for the sake of clarity:
@Override
public void start(Stage primaryStage) {
    AreaChart<String, Number> areaChart=new AreaChart<>(new CategoryAxis(),new NumberAxis());

    ObservableList<XYChart.Data<String,Integer>> xyList
            = FXCollections.observableArrayList(
                    new XYChart.Data<>("P1", 30),
                    new XYChart.Data<>("P2", 40),
                    new XYChart.Data<>("P3", 30));
    XYChart.Series series = new XYChart.Series(xyList);
    areaChart.getData().addAll(series);

    Button button = new Button("Change style");
    button.setOnAction(e->{
        int redColor=0, greenColor=127, blueColor=195;
        double opacity=0.3;
        areaChart.setStyle("CHART_COLOR_1: rgb("+redColor+","+greenColor+","+blueColor+"); "
                + "CHART_COLOR_1_TRANS_20: rgba("+redColor+","+greenColor+","+blueColor+","+opacity+");");
    });

    VBox root = new VBox(5, button, areaChart);
    Scene scene = new Scene(root, 400, 300);        
    primaryStage.setScene(scene);
    primaryStage.show();
}
This would be the result:



                        
这篇关于面积图中的颜色变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！