我正在尝试设置我的 JavaFX 折线图的样式，但找不到任何方法将颜色设置为特定系列。我知道，我可以通过 CSS 设置样式，但我找不到如何为我的系列设置 ID 或 CLASS。
谁能给我一个线索：
- 如何为折线图设置颜色？
- 如何将css类设置为系列？
问问题
41775 次
5 回答
14
一般来说，样式图表的首选方式是没有代码，只使用 jschoen 推荐的 css 样式表。此外，如果需要进一步定制，您可以使用代码中的 css 查找来挖掘从系列数据生成的节点并应用各种额外的 css 样式。
这是有关动态更改JavaFX 折线图样式的信息以及与答案相关的示例程序。在示例应用程序中，所有额外的 css 样式都是通过代码中的 setStyle 调用完成的。使用类似的查找技术，您可以访问系列节点以应用适当的样式表样式类而不是 setStyle 调用。
于 2012-06-22T22:37:20.240 回答
8
如何为折线图设置颜色？
这是AreaChart或LineChart的简单方法
XYChart chart = new AreaChart();
Series series = new Series();
chart.getData().add(series);
Node fill = series.getNode().lookup(".chart-series-area-fill"); // only for AreaChart
Node line = series.getNode().lookup(".chart-series-area-line");
Color color = Color.RED; // or any other color
String rgb = String.format("%d, %d, %d",
(int) (color.getRed() * 255),
(int) (color.getGreen() * 255),
(int) (color.getBlue() * 255));
fill.setStyle("-fx-fill: rgba(" + rgb + ", 0.15);");
line.setStyle("-fx-stroke: rgba(" + rgb + ", 1.0);");
于 2015-02-12T12:22:03.447 回答
4
我找到了一个关于使用 CSS 设计图表样式的 Oracle 文档，并在该页面上向下滚动到Setting Chart Colors您正在寻找的内容。
如何为折线图设置颜色？
最简单的方法是以下 CSS 片段：
.default-color0.chart-series-line { -fx-stroke: #e9967a; }
.default-color1.chart-series-line { -fx-stroke: #f0e68c; }
.default-color2.chart-series-line { -fx-stroke: #dda0dd; }
不幸的是，这不适用于 id 或哪个系列，而是该系列在图中的顺序。您也可以通过以下方式设置线条样式：
.chart-series-line {
-fx-stroke-width: 2px;
-fx-effect: null;
}
如何将css类设置为系列？
不幸的是，我看不到这样做的方法。能够基于 XYChart.Series 名称属性创建 CSS 规则会很好，但我认为这是不可能的。
于 2012-06-22T16:20:20.083 回答
3
Jewelsea 的回答似乎表明您必须在该系列的每个节点上放置一个样式类。我正在使用以下代码来设置面积图系列的样式，并且只为与该系列关联的节点分配一个类。
示例代码在 Scala 中，但应该易于翻译。
创建系列时，我添加了一个系列特定的样式类：
val s = new XYChart.Series[Number, Number]() //create a new series
s.setName(seriesName) //set its name (display in legend)
s.getNode.getStyleClass.add("series-" + seriesName) //add specific style class
然后在 CSS 文件中，我执行以下操作来更改系列的填充颜色butterwings：
.series-butterwings *.chart-series-area-fill{
-fx-fill: #aab597;
}
这是可行的，因为系列区域的节点位于系列节点下方（在面积图的情况下是一个组）。
于 2012-09-05T17:08:59.477 回答
0
要将 getNode() 放置在代码中的某个位置可能会导致 NullPointerException，请覆盖 XYChart（AreaChart、BarChart、BubbleChart、LineChart、ScatterChart、StackedAreaChart、StackedBarChart）中的 layoutPlotChildren() 抽象方法。无需使用 CSS 样式表即可更改线条和形状的最小图表示例：
public class MyChart extends LineChart {
Series s1;
public MyChart() {
this(new NumberAxis(), new NumberAxis());
this.getXAxis().setLabel("X");
this.getYAxis().setLabel("Y");
}
public MyChart(Axis axis, Axis axis1) {
super(axis, axis1);
s1 = new XYChart.Series();
getData().add(s1);
}
public void adddata() {
s1.setName("Demo");
s1.getData().add(new XYChart.Data(0, 1));
s1.getData().add(new XYChart.Data(1, 2));
s1.getData().add(new XYChart.Data(2, 0));
s1.getData().add(new XYChart.Data(3, 1));
}
// Override the abstract class
public void layoutPlotChildren() {
// call super so you don't have to do all the work
super.layoutPlotChildren();
// not really necessary check
if (s1 != null && s1.getNode() != null) {
//(optional) get all the possible CSS styles you can change
List<String> styles = s1.getNode().getStyleClass();
//get the line from the series
Node line = s1.getNode().lookup(".chart-series-line");
//set some styles
line.setStyle("-fx-stroke: black; -fx-stroke-width: 1px; -fx-effect: null; -fx-stroke-dash-array: 10 10 10 10;");
//change the shapes
for (Object data : s1.getData()) {
if (data != null) {
//only display the last data point, change the style same way as shown with the line
if (s1.getData().indexOf(data) != s1.getData().size()-1) {
StackPane stackPane = (StackPane) ((XYChart.Data) data).getNode();
stackPane.setVisible(false);
}
}
}
}
}
}
以及启动它的执行代码：
public class RunJavaFX extends Application {
public static void main(String[] args) {
launch(args);
}
@Override
public void start(Stage primaryStage) throws Exception {
MyChart chart = new MyChart();
chart.adddata();
Scene scene = new Scene(chart);
primaryStage.setScene(scene);
primaryStage.show();
}
}
于 2021-03-17T16:05:26.520 回答