更改不同值的图表颜色 [英] Change chart colors for different values

问题描述

我想创建温度图表，我可以实时监控温度。

I want to create temperature chart where I can monitor in real time temperature.

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.StackedAreaChart;
import javafx.scene.chart.XYChart;
import javafx.stage.Stage;

public class MainApp extends Application
{

    final NumberAxis xAxis = new NumberAxis(1, 31, 1);
    final NumberAxis yAxis = new NumberAxis();
    final StackedAreaChart<Number, Number> sac
        = new StackedAreaChart<Number, Number>(xAxis, yAxis);

    @Override
    public void start(Stage stage)
    {


        setUserAgentStylesheet(STYLESHEET_CASPIAN);
        stage.setTitle("Area Chart Sample");
        sac.setTitle("Temperature Monitoring (in Degrees C)");
        XYChart.Series<Number, Number> seriesApril
            = new XYChart.Series<Number, Number>();
        seriesApril.setName("April");
        seriesApril.getData().add(new XYChart.Data(1, 4));
        seriesApril.getData().add(new XYChart.Data(3, 10));
        seriesApril.getData().add(new XYChart.Data(6, 15));
        seriesApril.getData().add(new XYChart.Data(9, 8));
        seriesApril.getData().add(new XYChart.Data(12, 5));
        seriesApril.getData().add(new XYChart.Data(15, 18));
        seriesApril.getData().add(new XYChart.Data(18, 15));
        seriesApril.getData().add(new XYChart.Data(21, 13));
        seriesApril.getData().add(new XYChart.Data(24, 19));
        seriesApril.getData().add(new XYChart.Data(27, 21));
        seriesApril.getData().add(new XYChart.Data(30, 21));
        XYChart.Series<Number, Number> seriesMay
            = new XYChart.Series<Number, Number>();
        seriesMay.setName("May");
        seriesMay.getData().add(new XYChart.Data(1, 20));
        seriesMay.getData().add(new XYChart.Data(3, 15));
        seriesMay.getData().add(new XYChart.Data(6, 13));
        seriesMay.getData().add(new XYChart.Data(9, 12));
        seriesMay.getData().add(new XYChart.Data(12, 14));
        seriesMay.getData().add(new XYChart.Data(15, 18));
        seriesMay.getData().add(new XYChart.Data(18, 25));
        seriesMay.getData().add(new XYChart.Data(21, 25));
        seriesMay.getData().add(new XYChart.Data(24, 23));
        seriesMay.getData().add(new XYChart.Data(27, 26));
        seriesMay.getData().add(new XYChart.Data(31, 26));
        Scene scene = new Scene(sac, 800, 600);
        sac.getData().addAll(seriesApril);
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args)
    {
        launch(args);
    }
}

我想更改图表的颜色高度温度。例如，我希望温度在10到20之间，绿色，温度在40到50之间，红色。你可以帮我实现吗？

I want to change the color of of the chart for height temperature. For example I want to see temperature between 10 and 20 in green and temperature between 40 and 50 in red. Can you hep me to implement this?

推荐答案

这只适用于CSS。

添加以下内容行到你的CSS并给你的图表id temperatureChart 。

#temperatureChart .series0.chart-series-area-fill {
    -fx-fill: linear-gradient(to top, #0984df, #00d8ff 20%, #fff000 60%, #ff0000) ;
}

您必须自己弄清楚正确的百分比值。

The right percent values you must figure out yourself.

希望这有帮助，

Kalasch

Hope this helps,
Kalasch

编辑（在代码方法中）：

要在Code中执行此操作，您可以执行以下操作（建议您检查查找是否为null）：

EDIT(in code method):
To do this in Code, you can do the following(it is suggested that you check if the lookup is null):

sac.lookup("#temperatureChart .series0.chart-series-area-fill")
.setStyle("-fx-fill: linear-gradient(to top, #0984df, #00d8ff 20%, #fff000 60%, #ff0000);");

不建议这样做，但如果没有其他方式......

It is not recomended to do so, but if there is no other way...

这篇关于更改不同值的图表颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！