有条件的颜色背景JavaFX LineChart [英] Conditionally Color Background JavaFX LineChart
本文介绍了有条件的颜色背景JavaFX LineChart的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我希望有条件地改变折线图的背景颜色。在给定的示例中，我正在修改图表，以便Y值> = 3的任何部分在后台显示为红色阴影：
I'm looking to conditionally change the background color of a line chart. In the given example, I'm looking to modify the chart so that any sections with a Y value >=3 get shaded red in the background:
LineChartJavaFXTest.java
LineChartJavaFXTest.java
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.stage.Stage;
public class LineChartJavaFXTest extends Application {
@Override public void start(Stage stage) {
stage.setTitle("Line Chart Sample");
//defining the axes
final NumberAxis xAxis = new NumberAxis();
final NumberAxis yAxis = new NumberAxis();
xAxis.setLabel("Seconds");
yAxis.setLabel("Volume");
//creating the chart
final LineChart<Number,Number> lineChart =
new LineChart<Number,Number>(xAxis,yAxis);
lineChart.setTitle("Test Chart");
//defining a series
XYChart.Series series = new XYChart.Series();
//populating the series with data
series.getData().add(new XYChart.Data(1, 0));
series.getData().add(new XYChart.Data(2, 1));
series.getData().add(new XYChart.Data(3, 2));
series.getData().add(new XYChart.Data(4, 2));
series.getData().add(new XYChart.Data(5, 1));
series.getData().add(new XYChart.Data(6, 2));
series.getData().add(new XYChart.Data(7, 3));
series.getData().add(new XYChart.Data(8, 3));
series.getData().add(new XYChart.Data(9, 4));
series.getData().add(new XYChart.Data(10, 3));
series.getData().add(new XYChart.Data(11, 2));
series.getData().add(new XYChart.Data(12, 1));
Scene scene = new Scene(lineChart,800,600);
scene.getStylesheets().add("LineChart.css");
lineChart.getData().add(series);
lineChart.applyCss();
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
LineChart.css
LineChart.css
.chart {
-fx-padding: 10px;
-fx-background-color: #010101;
-fx-legend-visible: false;
}
.chart-content {
-fx-padding: 30px;
}
.chart-title {
-fx-text-fill: #ffffff;
-fx-font-size: 1.6em;
}
.axis-label {
-fx-text-fill: #ffffff;
}
.chart-plot-background {
-fx-background-color:transparent;
}
.chart-vertical-grid-lines {
-fx-stroke:#505050;
}
.chart-horizontal-grid-lines {
-fx-stroke: #505050;
}
.chart-alternative-row-fill {
-fx-fill:transparent;
-fx-stroke: transparent;
}
.default-color0.chart-series-line {
-fx-stroke: #0000ff;
}
.default-color0.chart-line-symbol {
-fx-background-color: #0000ff, white;
}
结果
推荐答案
这个答案的灵感来自 JavaFX折线图颜色差异。我会建议你先完成它。
This answer is inspired by the solution to JavaFX Linechart Color differences. I would advice you to go through it first.
这个答案包括一个红色渐变，因为这是OP想要的。
This answer includes a single red color gradient because that is what OP wants.
解决方案
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.scene.paint.Color;
import javafx.scene.paint.CycleMethod;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.Stop;
import javafx.scene.shape.Polygon;
import javafx.stage.Stage;
public class LineChartJavaFXTest extends Application {
public static void main(String[] args) {
launch(args);
}
@Override
public void start(Stage stage) {
stage.setTitle("Line Chart Sample");
//defining the axes
final NumberAxis xAxis = new NumberAxis();
final NumberAxis yAxis = new NumberAxis();
xAxis.setLabel("Seconds");
yAxis.setLabel("Volume");
//defining a series
XYChart.Series series = new XYChart.Series();
//populating the series with data
series.getData().add(new XYChart.Data(1, 0));
series.getData().add(new XYChart.Data(2, 1));
series.getData().add(new XYChart.Data(3, 2));
series.getData().add(new XYChart.Data(4, 2));
series.getData().add(new XYChart.Data(5, 1));
series.getData().add(new XYChart.Data(6, 2));
series.getData().add(new XYChart.Data(7, 3));
series.getData().add(new XYChart.Data(8, 3));
series.getData().add(new XYChart.Data(9, 4));
series.getData().add(new XYChart.Data(10, 3));
series.getData().add(new XYChart.Data(11, 2));
series.getData().add(new XYChart.Data(12, 1));
//creating the chart
final LineChart<Number, Number> lineChart =
new LineChart<Number, Number>(xAxis, yAxis, FXCollections.observableArrayList(series)) {
@Override
protected void layoutPlotChildren() {
super.layoutPlotChildren();
Series series = (Series) getData().get(0);
ObservableList<Data<Number,Number>> listOfData = series.getData();
for(int i = 0; i < listOfData.size()-1; i++) {
// Check for Y value >=3
if(listOfData.get(i).getYValue().doubleValue() >= 3 &&
listOfData.get(i+1).getYValue().doubleValue() >= 3) {
double x1 = getXAxis().getDisplayPosition(listOfData.get(i).getXValue());
double y1 = getYAxis().getDisplayPosition(0);
double x2 = getXAxis().getDisplayPosition(listOfData.get((i + 1)).getXValue());
double y2 = getYAxis().getDisplayPosition(0);
Polygon polygon = new Polygon();
LinearGradient linearGrad = new LinearGradient( 0, 0, 0, 1,
true, // proportional
CycleMethod.NO_CYCLE, // cycle colors
new Stop(0.1f, Color.rgb(255, 0, 0, .3)));
polygon.getPoints().addAll(new Double[]{
x1,y1,
x1, getYAxis().getDisplayPosition(listOfData.get(i).getYValue()),
x2,getYAxis().getDisplayPosition(listOfData.get((i+1)).getYValue()),
x2,y2
});
getPlotChildren().add(polygon);
polygon.toFront();
polygon.setFill(linearGrad);
}
}
}
};
lineChart.setTitle("Test Chart");
Scene scene = new Scene(lineChart, 800, 600);
scene.getStylesheets().add("LineChart.css");
lineChart.applyCss();
stage.setScene(scene);
stage.show();
}
}
这篇关于有条件的颜色背景JavaFX LineChart的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
