如何仅从 JavaFx 图表中的选定系列中删除符号标记?
How to remove symbol markers from only selected series in JavaFx Charts?
我在 JavaFx 图表中使用了 4 个不同的系列。三个系列是静态的,并显示绿色、黄色和红色等实际数据的各种警报级别。
我希望将符号显示为工具提示,但仅在实际数据行(蓝色)上显示,并希望将它们从我的静态警报级别线(红色、黄色和绿色)中删除以获得吸引人的外观。
我尝试使用 JavaFx Css,但没有成功。
下面是我的代码:
.default-color0.chart-series-line {
-fx-stroke: #00cc33;
-fx-stroke-type: centered;
-fx-symbol-visible: false;
}
.default-color1.chart-series-line {
-fx-stroke: #ffff00;
-fx-stroke-type: centered;
-fx-symbol-visible: false;
}
.default-color2.chart-series-line {
-fx-stroke: #cc0000;
-fx-stroke-type: centered;
-fx-symbol-visible: false;
}
.default-color3.chart-series-line{
-fx-stroke-width: 1px;
-fx-symbol-visible: true;
}
下面是相同的图示:
不知道哪里错了
我找到了解决您问题的方法。您可以在图表上找到所有符号。这些符号是节点 (StackPane),因此您可以设置 属性 可见。这是循环:
//in loop take all series
for (XYChart.Series<Number, Number> series : lineChart.getData()) {
if (series.getName().equals("blue")) //if Name is "blue" then continue
continue;
//for all series, take date, each data has Node (symbol) for representing point
for (XYChart.Data<Number, Number> data : series.getData()) {
// this node is StackPane
StackPane stackPane = (StackPane) data.getNode();
stackPane.setVisible(false);
}
}
这是代码示例应用程序:
public class Chart extends Application {
@Override public void start(Stage stage) {
final NumberAxis xAxis = new NumberAxis();
final NumberAxis yAxis = new NumberAxis();
final LineChart<Number, Number> lineChart = new LineChart<Number, Number>(xAxis, yAxis);
XYChart.Series series1 = new XYChart.Series();
series1.setName("green"); //i added name to all series, to find easy in loop
series1.getData().add(new XYChart.Data(1, 2));
series1.getData().add(new XYChart.Data(2, 2));
series1.getData().add(new XYChart.Data(3, 2));
series1.getData().add(new XYChart.Data(4, 2));
series1.getData().add(new XYChart.Data(5, 2));
XYChart.Series series2 = new XYChart.Series();
series2.setName("yellow");
series2.getData().add(new XYChart.Data(1, 3));
series2.getData().add(new XYChart.Data(2, 3));
series2.getData().add(new XYChart.Data(3, 3));
series2.getData().add(new XYChart.Data(4, 3));
series2.getData().add(new XYChart.Data(5, 3));
XYChart.Series series3 = new XYChart.Series();
series3.setName("red");
series3.getData().add(new XYChart.Data(1, 4));
series3.getData().add(new XYChart.Data(2, 4));
series3.getData().add(new XYChart.Data(3, 4));
series3.getData().add(new XYChart.Data(4, 4));
series3.getData().add(new XYChart.Data(5, 4));
XYChart.Series series4 = new XYChart.Series();
series4.setName("blue");
series4.getData().add(new XYChart.Data(1, 5));
series4.getData().add(new XYChart.Data(2, 5));
series4.getData().add(new XYChart.Data(3, 5));
series4.getData().add(new XYChart.Data(4, 5));
series4.getData().add(new XYChart.Data(5, 5));
HBox hbox = new HBox();
lineChart.getData().addAll(series1, series2, series3, series4);
//in loop take all series
for (XYChart.Series<Number, Number> series : lineChart.getData()) {
if (series.getName().equals("blue")) //if Name is "blue" then continue
continue;
//for all series, take date, each data has Node (symbol) for representing point
for (XYChart.Data<Number, Number> data : series.getData()) {
// this node is StackPane
StackPane stackPane = (StackPane) data.getNode();
stackPane.setVisible(false);
}
}
hbox.getChildren().addAll(lineChart);
Scene scene = new Scene(hbox, 800, 600);
scene.getStylesheets().add(getClass().getResource("/resources/chart.css").toExternalForm());
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
和CSS:
.default-color0.chart-series-line {
-fx-stroke: #00cc33;
-fx-stroke-type: centered;
}
.default-color1.chart-series-line {
-fx-stroke: #ffff00;
-fx-stroke-type: centered;
}
.default-color2.chart-series-line {
-fx-stroke: #cc0000;
-fx-stroke-type: centered;
}
.default-color3.chart-series-line{
-fx-stroke-width: 1px;
}
现在看起来像这样:
我在 JavaFx 图表中使用了 4 个不同的系列。三个系列是静态的,并显示绿色、黄色和红色等实际数据的各种警报级别。
我希望将符号显示为工具提示,但仅在实际数据行(蓝色)上显示,并希望将它们从我的静态警报级别线(红色、黄色和绿色)中删除以获得吸引人的外观。
我尝试使用 JavaFx Css,但没有成功。 下面是我的代码:
.default-color0.chart-series-line {
-fx-stroke: #00cc33;
-fx-stroke-type: centered;
-fx-symbol-visible: false;
}
.default-color1.chart-series-line {
-fx-stroke: #ffff00;
-fx-stroke-type: centered;
-fx-symbol-visible: false;
}
.default-color2.chart-series-line {
-fx-stroke: #cc0000;
-fx-stroke-type: centered;
-fx-symbol-visible: false;
}
.default-color3.chart-series-line{
-fx-stroke-width: 1px;
-fx-symbol-visible: true;
}
下面是相同的图示:
不知道哪里错了
我找到了解决您问题的方法。您可以在图表上找到所有符号。这些符号是节点 (StackPane),因此您可以设置 属性 可见。这是循环:
//in loop take all series
for (XYChart.Series<Number, Number> series : lineChart.getData()) {
if (series.getName().equals("blue")) //if Name is "blue" then continue
continue;
//for all series, take date, each data has Node (symbol) for representing point
for (XYChart.Data<Number, Number> data : series.getData()) {
// this node is StackPane
StackPane stackPane = (StackPane) data.getNode();
stackPane.setVisible(false);
}
}
这是代码示例应用程序:
public class Chart extends Application {
@Override public void start(Stage stage) {
final NumberAxis xAxis = new NumberAxis();
final NumberAxis yAxis = new NumberAxis();
final LineChart<Number, Number> lineChart = new LineChart<Number, Number>(xAxis, yAxis);
XYChart.Series series1 = new XYChart.Series();
series1.setName("green"); //i added name to all series, to find easy in loop
series1.getData().add(new XYChart.Data(1, 2));
series1.getData().add(new XYChart.Data(2, 2));
series1.getData().add(new XYChart.Data(3, 2));
series1.getData().add(new XYChart.Data(4, 2));
series1.getData().add(new XYChart.Data(5, 2));
XYChart.Series series2 = new XYChart.Series();
series2.setName("yellow");
series2.getData().add(new XYChart.Data(1, 3));
series2.getData().add(new XYChart.Data(2, 3));
series2.getData().add(new XYChart.Data(3, 3));
series2.getData().add(new XYChart.Data(4, 3));
series2.getData().add(new XYChart.Data(5, 3));
XYChart.Series series3 = new XYChart.Series();
series3.setName("red");
series3.getData().add(new XYChart.Data(1, 4));
series3.getData().add(new XYChart.Data(2, 4));
series3.getData().add(new XYChart.Data(3, 4));
series3.getData().add(new XYChart.Data(4, 4));
series3.getData().add(new XYChart.Data(5, 4));
XYChart.Series series4 = new XYChart.Series();
series4.setName("blue");
series4.getData().add(new XYChart.Data(1, 5));
series4.getData().add(new XYChart.Data(2, 5));
series4.getData().add(new XYChart.Data(3, 5));
series4.getData().add(new XYChart.Data(4, 5));
series4.getData().add(new XYChart.Data(5, 5));
HBox hbox = new HBox();
lineChart.getData().addAll(series1, series2, series3, series4);
//in loop take all series
for (XYChart.Series<Number, Number> series : lineChart.getData()) {
if (series.getName().equals("blue")) //if Name is "blue" then continue
continue;
//for all series, take date, each data has Node (symbol) for representing point
for (XYChart.Data<Number, Number> data : series.getData()) {
// this node is StackPane
StackPane stackPane = (StackPane) data.getNode();
stackPane.setVisible(false);
}
}
hbox.getChildren().addAll(lineChart);
Scene scene = new Scene(hbox, 800, 600);
scene.getStylesheets().add(getClass().getResource("/resources/chart.css").toExternalForm());
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
和CSS:
.default-color0.chart-series-line {
-fx-stroke: #00cc33;
-fx-stroke-type: centered;
}
.default-color1.chart-series-line {
-fx-stroke: #ffff00;
-fx-stroke-type: centered;
}
.default-color2.chart-series-line {
-fx-stroke: #cc0000;
-fx-stroke-type: centered;
}
.default-color3.chart-series-line{
-fx-stroke-width: 1px;
}
现在看起来像这样: