java - 如何为 JavaFX 图表系列着色
问题描述
如何设置左图和右图的条形颜色?
假设左边的图表应该有所有的绿色条,右边的图表应该有所有的红色条。
我希望 CSS 是内联的,而不是在单独的文件中。
public class SideBySideChart2 extends Application {
HBox root = new HBox();
@Override
public void start(Stage primaryStage) throws Exception {
BarChart<String, Number> chartA = createChart();
BarChart<String, Number> chartB = createChart();
root.getChildren().addAll(chartA, chartB);
Scene scene = new Scene(root, 400, 200);
primaryStage.setScene(scene);
primaryStage.setHeight(600);
primaryStage.setWidth(400);
primaryStage.show();
populateCharts(chartA, chartB);
}
private BarChart<String, Number> createChart() {
final CategoryAxis xAxis = new CategoryAxis();
final NumberAxis yAxis = new NumberAxis(0, 100, 1);
yAxis.setTickUnit(1);
yAxis.setPrefWidth(35);
yAxis.setMinorTickCount(10);
yAxis.setTickLabelFormatter(new NumberAxis.DefaultFormatter(yAxis) {
@Override
public String toString(Number object) {
String label;
label = String.format("%7.2f", object.floatValue());
return label;
}
});
final BarChart<String, Number> chart = new BarChart<String, Number>(xAxis, yAxis);
return chart;
}
private void populateCharts(BarChart<String,Number> chartA, BarChart<String,Number> chartB) {
XYChart.Series seriesA = new XYChart.Series();
seriesA.getData().add(new XYChart.Data("310", 100));
seriesA.getData().add(new XYChart.Data("305", 4));
seriesA.getData().add(new XYChart.Data("300", 2.5));
chartA.getData().addAll(seriesA);
XYChart.Series seriesB = new XYChart.Series();
seriesB.getData().add(new XYChart.Data("300", 1));
seriesB.getData().add(new XYChart.Data("305", 4));
seriesB.getData().add(new XYChart.Data("310", 2.5));
chartB.getData().addAll(seriesB);
}
public static void main(String[] args) {
Application.launch(args);
}
}
解决方案
一种方法是使用CSS
. 请参阅此内容以供参考。要完成这项工作,您需要对数据进行排序。然后将排序后的数据添加到图表中。然后CSS
根据它在图表中的位置来设置条形的颜色。
主要的
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.BarChart;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
public class TestingGround extends Application
{
HBox root = new HBox();
@Override
public void start(Stage primaryStage) throws Exception
{
BarChart<String, Number> chartA = createChart();
BarChart<String, Number> chartB = createChart();
root.getChildren().addAll(chartA, chartB);
Scene scene = new Scene(root, 400, 200);
scene.getStylesheets().add("testingground/chartcss.css");
primaryStage.setScene(scene);
primaryStage.setHeight(600);
primaryStage.setWidth(400);
primaryStage.show();
populateCharts(chartA, chartB);
}
private BarChart<String, Number> createChart()
{
final CategoryAxis xAxis = new CategoryAxis();
final NumberAxis yAxis = new NumberAxis(0, 100, 1);
yAxis.setTickUnit(1);
yAxis.setPrefWidth(35);
yAxis.setMinorTickCount(10);
yAxis.setTickLabelFormatter(new NumberAxis.DefaultFormatter(yAxis)
{
@Override
public String toString(Number object)
{
String label;
label = String.format("%7.2f", object.floatValue());
return label;
}
});
final BarChart<String, Number> chart = new BarChart(xAxis, yAxis);
chart.setAlternativeRowFillVisible(false);
chart.setLegendVisible(false);
chart.setAnimated(false);
chart.prefWidthProperty().bind(this.root.widthProperty().multiply(0.5));
chart.prefHeightProperty().bind(this.root.heightProperty());
chart.minHeightProperty().bind(this.root.heightProperty());
// Set this so axis bounds can be set manually.
yAxis.setAutoRanging(false);
return chart;
}
private void populateCharts(BarChart<String, Number> chartA, BarChart<String, Number> chartB)
{
XYChart.Series seriesA = new XYChart.Series();
//data sorted!
seriesA.getData().add(new XYChart.Data("300", 2.5));
seriesA.getData().add(new XYChart.Data("305", 4));
seriesA.getData().add(new XYChart.Data("310", 100));
chartA.getData().addAll(seriesA);
XYChart.Series seriesB = new XYChart.Series();
//sorted data!
seriesB.getData().add(new XYChart.Data("300", 1));
seriesB.getData().add(new XYChart.Data("305", 4));
seriesB.getData().add(new XYChart.Data("310", 2.5));
chartB.getData().addAll(seriesB);
}
public static void main(String[] args)
{
Application.launch(args);
}
}
CSS
data0.chart-bar {
-fx-background-color: #ffd700;
}
.data1.chart-bar {
-fx-background-color: #ffa500;
}
.data2.chart-bar {
-fx-background-color: #860061;
}
结果:
更新:
进行更新的最简单方法是遍历每个节点并设置其颜色。此代码应遵循populateCharts(chartA, chartB);
populateCharts(chartA, chartB);
chartA.getData().get(0).getData().forEach((item) -> {
item.getNode().setStyle("-fx-background-color: red");
});
chartB.getData().get(0).getData().forEach((item) -> {
item.getNode().setStyle("-fx-background-color: green");
});
推荐阅读
- c# - Power Query SDK 连接到 OLE DB Excel
- git - 是否有 GIT 的替代方案或小型团队的快速工作流程?
- swift - Swift:创建坐标数组
- python - 在 Nvidia 的 GPU 上添加数组
- android - 自贬值以来,android中网络信息的替代方法是什么
- entity-framework - 使用公共 sql 连接或在需要的地方创建连接?
- python - 原始异常文本为:“RelatedManager”对象没有属性“类型”。- 姜戈休息
- python - 正则表达式:找到有限的迭代
- c++ - 无法在 INT FUNCTION C++ 中返回值
- javascript - PHP中的301永久重定向