Quero mostrar valores em cima do LineChart. Eu vi essa resposta , que é bastante útil, mas ela muda os nós LineChart. O que eu quero é a mesma idéia, mas mostrando valores não em nós, mas perto deles (talvez direita e acima deles) algo como:
53
O
/ \
/ \
/42 \ 21 21
O O------------O
EDITAR:
Eu tentei o código abaixo, mas infelizmente só aparecem linhas, não mostra os nós.
for (int index = 0; index < value.getData().size(); index++) {
XYChart.Data dataPoint = value.getData().get(index);
Node lineSymbol = dataPoint.getNode().lookup(".chart-line-symbol");
lineSymbol.setStyle("-fx-background-color: " + definedColor + " , white;");
Label label = new Label(value.getName());
label.toFront();
Pane nodeWithText = new Pane();
label.setStyle("-fx-font-size: 20; -fx-font-weight: bold;");
StackPane stackPane = new StackPane();
Group group = new Group(label);
group.getChildren().add(lineSymbol);
group.toFront();
group.setLayoutX(-10);
group.setLayoutY(-30);
StackPane.setAlignment(group, Pos.TOP_RIGHT);
StackPane.setMargin(group,new Insets(0,0,5,0));
nodeWithText.getChildren().add(group);
nodeWithText.getChildren().add(lineSymbol);
dataPoint.setNode(nodeWithText);
}
Uma opção é para definir um personalizado Node
para cada Data
em sua carta. Aqui está um exemplo grosseiro:
import javafx.application.Application;
import javafx.beans.binding.ObjectExpression;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart.Data;
import javafx.scene.chart.XYChart.Series;
import javafx.scene.control.Label;
import javafx.scene.layout.Pane;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage primaryStage) {
var chart = new LineChart<>(new NumberAxis(), new NumberAxis());
chart.getData().add(new Series<>(createData()));
primaryStage.setScene(new Scene(chart, 600, 400));
primaryStage.show();
}
private static ObservableList<Data<Number, Number>> createData() {
var list = FXCollections.<Data<Number, Number>>observableArrayList();
for (int x = 0; x < 10; x++) {
var data = new Data<Number, Number>(x, Math.pow(x, 2));
data.setNode(createDataNode(data.YValueProperty()));
list.add(data);
}
return list;
}
private static Node createDataNode(ObjectExpression<Number> value) {
var label = new Label();
label.textProperty().bind(value.asString("%,.2f"));
var pane = new Pane(label);
pane.setShape(new Circle(6.0));
pane.setScaleShape(false);
label.translateYProperty().bind(label.heightProperty().divide(-1.5));
return pane;
}
}
O acima não faz nada complexo quando se trata de posicionar o texto. Por exemplo, não terá em conta onde a linha é nem se quer ou não parte do texto é cortada pelo clipe do gráfico. Basicamente, é uma prova de conceito; os olhares resultado como:
Algumas outras opções possíveis para a adição de texto para o gráfico incluem:
- Coloque o
LineChart
em umGroup
ouPane
onde o gráfico é o primeiro filho. Então, para cadaData
em seu gráfico, você adicionar umLabel
ouText
para o pai e posicioná-lo em relação à posição doData
's nó (quando estiver disponível). Você pode calcular estas posições usando métodos tais comoNode#localToScene
eNode#sceneToLocal
. - Subclasse
LineChart
e adicionar oText
ouLabel
a tabela diretamente. Como eu nunca subclasse um gráfico antes, eu não tenho certeza como implementar esta opção. - Outra coisa que eu não estou pensando.
Note-se que, não importa o que você faz, se o gráfico tem um monte de pontos de dados muito próximos uns dos outros, em seguida, exibindo todo o texto de uma maneira visualmente agradável será difícil, se não impossível.