Question

我正在绘制一个包含多个系列的图表，但我只能用css个性化前7个系列。从第8个系列开始，它将返回default-color0设置。有人能帮助我吗？

css代码：

＆＃13;

.default-color0.chart-series-line {
    -fx-stroke: transparent;
}
.default-color0.chart-line-symbol { 
    -fx-background-color: transparent, transparent;
}
.default-color3.chart-series-line {
    -fx-stroke: transparent;
}
.default-color3.chart-line-symbol{
    -fx-shape: "M0,1 L0,2 L1,2 L1,3 L2,3 L2,2 L3,2 L3,1 L2,1 L2,0 L1,0 L1,2 z"; /* <= Esse é para cruz */
    -fx-background-color: blue, blue;
}
.default-color4.chart-series-line {
    -fx-stroke: transparent;
}
.default-color4.chart-line-symbol{
    -fx-shape: "M0,4 L4,4 L4,0 L0,0 Z"; /* <= esse é para quadrado*/
}
.default-color5.chart-series-line {
    -fx-stroke: transparent;
}
.default-color5.chart-line-symbol{
    -fx-shape: "M0,4 L2,0 L4,4 Z"; /* <= esse é para triangulo*/
}
.default-color6.chart-series-line {
    -fx-stroke: transparent;
}
.default-color6.chart-line-symbol{
    -fx-shape: "M0,1 L0,2 L1,2 L1,3 L2,3 L2,2 L3,2 L3,1 L2,1 L2,0 L1,0 L1,2 z"; /* <= Esse é para cruz */
    -fx-background-color: red, red;
}
.default-color7.chart-series-line {
    -fx-stroke: transparent;
}
.default-color7.chart-line-symbol{
    -fx-shape: "M1,3 L0,1 L0,0 L1,0 L1,1 L2,1 L2,0 L3,0 L3,1 L2,3 z"; /* <= Esse é para coracao */
    -fx-border-color: rosybrown;
    -fx-background-color: rosybrown, rosybrown;
}
.default-color8.chart-series-line {
    -fx-stroke: transparent;
}
.default-color8.chart-line-symbol{
    -fx-shape: "M1,3 L0,1 L0,0 L1,0 L1,1 L2,1 L2,0 L3,0 L3,1 L2,3 z"; /* <= Esse é para coracao */
    -fx-border-color: green;
    -fx-background-color: green, green;
}

＆＃13;

Java代码：

 private void putDataChart(String cns){
  try{
    // Atention: the first serie is 'base' (dont show in the chart),
    // the second and the third ones shows the lines and de plots (Max and Min Artherial Pressure (AP))
    // after that all the lines are transparent and shows only the plots.
    // I could't go after the 7th serie becouse its repeats from the zero 
    // i dont know why.
    // to change this settings you have to change the chart.css
    chartPA.getData().clear();
    List<Document> eventos = eADO.getAllEvents(cns);
    if (eventos == null) return;      // get out if there is no events to show.
    XYChart.Series paMaxSerie = new XYChart.Series<>();
    XYChart.Series paMinSerie = new XYChart.Series<>();
    XYChart.Series consultas = new XYChart.Series<>();
    XYChart.Series grupos = new XYChart.Series<>();
    XYChart.Series exames = new XYChart.Series<>();
    XYChart.Series emergencias = new XYChart.Series<>();
    XYChart.Series base = new XYChart.Series<>();
    XYChart.Series risco = new XYChart.Series<>();
    XYChart.Series teste = new XYChart.Series<>(); //this series isnt showing .default-color8.chart-line-symbol

    paMinSerie.setName("PA min");
    paMaxSerie.setName("PA max");
    consultas.setName("Consulta");
    grupos.setName("Grupo");
    exames.setName("Exames");
    emergencias.setName("Emergências");
    base.setName("Legenda:");
    risco.setName("Risco CardioVascular");
    teste.setName("8th Serie");

    LocalDateTime oldestDate = LocalDateTime.now().minusDays(1);

    for (Document ev : eventos) {
        LocalDateTime ldt = LocalDateTime.from(ev.getDate("date").toInstant().atOffset(ZoneOffset.UTC));
        Duration dura = Duration.between(oldestDate,ldt);
        if (dura.toDays() < 0){
            oldestDate = LocalDateTime.from(ev.getDate("date").toInstant().atOffset(ZoneOffset.UTC));
        }
        String tipoEvento = ev.getString("tipo");
        LocalDate date = LocalDate.from(ev.getDate("date").toInstant().atOffset(ZoneOffset.UTC));
        if (tipoEvento.equals("CONSULTA")) {  // CONSULTA = Medical Appointment in portuguese
            consultas.getData().add(new XYChart.Data<>(date.toString(),10));
        } else if (tipoEvento.equals("GRUPOHAS")) { // = Hypertension group
            grupos.getData().add(new XYChart.Data<>(date.toString(),20));
        } else if (tipoEvento.equals("EXAMES")) {
            exames.getData().add(new XYChart.Data<>(date.toString(),30));
        } else if (tipoEvento.equals("CVRisk")) { 
            risco.getData().add(new XYChart.Data<>(date.toString(),200));
        } else if (tipoEvento.equals("EMERGENCIA")) {
            emergencias.getData().add(new XYChart.Data<>(date.toString(),50));
        } else if (tipoEvento.contains("PA")) { // = AP
            paMinSerie.getData().add(new XYChart.Data<>(date.toString(),ev.getInteger("MIN")));
            paMaxSerie.getData().add(new XYChart.Data<>(date.toString(),ev.getInteger("MAX")));
        }
    }

    Long baseDays = Duration.between(oldestDate, LocalDateTime.now()).toDays();
    for (long i = 0; i < baseDays; i++){
        LocalDate nextDay = oldestDate.plusDays(i).toLocalDate();
        base.getData().add(new XYChart.Data<>(nextDay.toString(),0));
    }

    chartPA.setVerticalGridLinesVisible(false);
    chartPA.getData().add(base);
    chartPA.getData().addAll(paMaxSerie, paMinSerie, consultas, grupos, 
            exames, emergencias, risco, teste); 

  } catch (Exception putz){
      ApoiosMongoADO.arquivaErro("Erro em HasFXMLController.putDataChart(cns)", putz);
  }
}

Answer 1

After digging I found the answer here: http://tiwulfx.panemu.com/2013/01/07/provide-more-colors-for-chart-series/

this is what I add to code (after initialized the chart) to work:

// Changing limit to 10 series
    int i=0;
    for (Node node : chartPA.lookupAll(".chart-legend-item")) {
        if (node instanceof Label && ((Label) node).getGraphic() != null) {
            ((Label) node).getGraphic().getStyleClass().remove("default-color" + (i % 8));
            ((Label) node).getGraphic().getStyleClass().add("default-color" + (i % 10));
        }
        i++;
    }
    for (i=0; i < 10; i++){
        for (Node node : chartPA.lookupAll(".series" + i)) {
            node.getStyleClass().remove("default-color" + (i % 8));
            node.getStyleClass().add("default-color" + (i % 10));
        }
    }

如何更改CSS中第7个系列之上的javaFX LineChart中的图标？

1 个答案: