条形图中的中心条
Center bars in a bar chart
我修改了 Oracle 网站的条形图示例,将每个系列的条形图减少到 1 个。不幸的是,条形图没有在刻度线上方居中。
有谁知道如何让条形图在刻度线上方水平居中?
代码如下:
public class BarChartDemo extends Application {
final static String austria = "Austria";
final static String brazil = "Brazil";
final static String france = "France";
@Override
public void start(Stage stage) {
stage.setTitle("Bar Chart Sample");
final CategoryAxis xAxis = new CategoryAxis();
final NumberAxis yAxis = new NumberAxis();
final BarChart<String, Number> bc = new BarChart<String, Number>(xAxis, yAxis);
bc.setTitle("Country Summary");
xAxis.setLabel("Country");
yAxis.setLabel("Value");
XYChart.Series series1 = new XYChart.Series();
series1.setName("2003");
series1.getData().add(new XYChart.Data(austria, 25601.34));
XYChart.Series series2 = new XYChart.Series();
series2.setName("2004");
series2.getData().add(new XYChart.Data(brazil, 41941.19));
XYChart.Series series3 = new XYChart.Series();
series3.setName("2005");
series3.getData().add(new XYChart.Data(france, 18722.18));
Scene scene = new Scene(bc, 800, 600);
bc.getData().addAll(series1, series2, series3);
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
这是它的样子:
非常感谢!
问题
您的条形图的问题在于您添加了 3 个系列,但每个系列中只有一个独特的国家/地区。条形图固有地为其他 2 个系列留下 space。
解决方案
实现此目的的正确方法是使用 one XYChart.Series
,然后为每个条形图添加颜色。这是一个示例应用程序,它执行相同的操作。
public class BarChartDemo extends Application {
final static String austria = "Austria";
final static String brazil = "Brazil";
final static String france = "France";
@Override
public void start(Stage stage) {
stage.setTitle("Bar Chart Sample");
final CategoryAxis xAxis = new CategoryAxis();
final NumberAxis yAxis = new NumberAxis();
final BarChart<String, Number> bc = new BarChart<String, Number>(xAxis, yAxis);
bc.setTitle("Country Summary");
xAxis.setLabel("Country");
yAxis.setLabel("Value");
XYChart.Series series1 = new XYChart.Series();
series1.setName("2003");
final XYChart.Data<String, Number> dataAustria = new XYChart.Data(austria, 25601.34);
final XYChart.Data<String, Number> dataBrazil = new XYChart.Data(brazil, 41941.19);
final XYChart.Data<String, Number> dataFrance = new XYChart.Data(france, 35000.19);
series1.getData().add(dataAustria);
series1.getData().add(dataBrazil);
series1.getData().add(dataFrance);
Scene scene = new Scene(bc, 800, 600);
bc.getData().addAll(series1);
stage.setScene(scene);
stage.show();
dataAustria.getNode().setStyle("-fx-bar-fill: CHART_COLOR_1;");
dataBrazil.getNode().setStyle("-fx-bar-fill: CHART_COLOR_2;");
dataFrance.getNode().setStyle("-fx-bar-fill: CHART_COLOR_3;");
}
public static void main(String[] args) {
launch(args);
}
}
输出符合您的要求:
注意:节点显示在舞台上后,您需要对其应用样式。或者,您可以使用 xyChartData.nodeProperty().addListener()
并将样式应用到其中。
dataAustria.nodeProperty().addListener((ov, oldNode, newNode) -> {
if(null != newNode) {
newNode.setStyle("-fx-bar-fill: red;");
}
});
我修改了 Oracle 网站的条形图示例,将每个系列的条形图减少到 1 个。不幸的是,条形图没有在刻度线上方居中。
有谁知道如何让条形图在刻度线上方水平居中?
代码如下:
public class BarChartDemo extends Application {
final static String austria = "Austria";
final static String brazil = "Brazil";
final static String france = "France";
@Override
public void start(Stage stage) {
stage.setTitle("Bar Chart Sample");
final CategoryAxis xAxis = new CategoryAxis();
final NumberAxis yAxis = new NumberAxis();
final BarChart<String, Number> bc = new BarChart<String, Number>(xAxis, yAxis);
bc.setTitle("Country Summary");
xAxis.setLabel("Country");
yAxis.setLabel("Value");
XYChart.Series series1 = new XYChart.Series();
series1.setName("2003");
series1.getData().add(new XYChart.Data(austria, 25601.34));
XYChart.Series series2 = new XYChart.Series();
series2.setName("2004");
series2.getData().add(new XYChart.Data(brazil, 41941.19));
XYChart.Series series3 = new XYChart.Series();
series3.setName("2005");
series3.getData().add(new XYChart.Data(france, 18722.18));
Scene scene = new Scene(bc, 800, 600);
bc.getData().addAll(series1, series2, series3);
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
这是它的样子:
非常感谢!
问题
您的条形图的问题在于您添加了 3 个系列,但每个系列中只有一个独特的国家/地区。条形图固有地为其他 2 个系列留下 space。
解决方案
实现此目的的正确方法是使用 one XYChart.Series
,然后为每个条形图添加颜色。这是一个示例应用程序,它执行相同的操作。
public class BarChartDemo extends Application {
final static String austria = "Austria";
final static String brazil = "Brazil";
final static String france = "France";
@Override
public void start(Stage stage) {
stage.setTitle("Bar Chart Sample");
final CategoryAxis xAxis = new CategoryAxis();
final NumberAxis yAxis = new NumberAxis();
final BarChart<String, Number> bc = new BarChart<String, Number>(xAxis, yAxis);
bc.setTitle("Country Summary");
xAxis.setLabel("Country");
yAxis.setLabel("Value");
XYChart.Series series1 = new XYChart.Series();
series1.setName("2003");
final XYChart.Data<String, Number> dataAustria = new XYChart.Data(austria, 25601.34);
final XYChart.Data<String, Number> dataBrazil = new XYChart.Data(brazil, 41941.19);
final XYChart.Data<String, Number> dataFrance = new XYChart.Data(france, 35000.19);
series1.getData().add(dataAustria);
series1.getData().add(dataBrazil);
series1.getData().add(dataFrance);
Scene scene = new Scene(bc, 800, 600);
bc.getData().addAll(series1);
stage.setScene(scene);
stage.show();
dataAustria.getNode().setStyle("-fx-bar-fill: CHART_COLOR_1;");
dataBrazil.getNode().setStyle("-fx-bar-fill: CHART_COLOR_2;");
dataFrance.getNode().setStyle("-fx-bar-fill: CHART_COLOR_3;");
}
public static void main(String[] args) {
launch(args);
}
}
输出符合您的要求:
注意:节点显示在舞台上后,您需要对其应用样式。或者,您可以使用 xyChartData.nodeProperty().addListener()
并将样式应用到其中。
dataAustria.nodeProperty().addListener((ov, oldNode, newNode) -> {
if(null != newNode) {
newNode.setStyle("-fx-bar-fill: red;");
}
});