JavaFX 折线图颜色差异答案

【问题标题】：JavaFX Linechart Color differencesJavaFX 折线图颜色差异
【发布时间】：2015-09-16 06:19:01
【问题描述】：

我在 JavaFx 中有一个带有两条线的折线图，我想为两条线之间的空间着色。我搜索了互联网，但没有找到任何东西。这就是我所拥有的：

我希望它看起来像:

【问题讨论】：

对我来说，这似乎是一个自定义 LineChart impl，您可以在其中覆盖 layoutPlotChildren()。在这种方法中，您需要做一些数学运算，也许this（德语）对您有帮助。之间的空间可以是 svg 路径。
如果2个系列不相交，你可以尝试使用AreaChart，下面的系列是透明背景的。
@UlukBiy 通常这永远不会发生 :-) 收缩压和舒张压是上下血压，所以如果它们相交，这个图表将是最小的问题......但在 AreaChart 中不是上方的背景也画在轴的下方吗？
我覆盖了layoutPlotChildren()，它现在可以工作了，非常感谢
@Zion 如果您愿意，您可以在下面发布您的解决方案作为答案（经过一段时间的延迟，您将能够将其标记为正确）。这可能会对其他用户有所帮助。

标签： java javafx

【解决方案1】：

感谢NwDx 的评论我能够解决我的问题。

我像这样覆盖了Chart 的layoutPlotChildren()：

 super.layoutPlotChildren();
    XYChart.Series s =  (XYChart.Series) getData().get(0);
    XYChart.Series d = (XYChart.Series) getData().get(1);
    ObservableList<XYChart.Data<X,Y>> systole = s.getData();
    ObservableList<XYChart.Data<X,Y>> diastole = d.getData();

    for(int i = 0; i < systole.size()-1; i++)
    {       
            XYChart.Data SysPoint  = systole.get(i);
            XYChart.Data DiasPoint = diastole.get(i);
            double x = getXAxis().getDisplayPosition(SysPoint.getXValue().toString()); 
            double y = getYAxis().getDisplayPosition(DiasPoint.getYValue()); 
            double x2 = getXAxis().getDisplayPosition(systole.get((i+1)).getXValue().toString());
            double y2 = getYAxis().getDisplayPosition(diastole.get((i+1)).getYValue());
              Polygon polygon = new Polygon();
              LinearGradient linearGrad = new LinearGradient(
            0,   // start X 
            0,   // start Y
            0,   // end X
            1, // end Y
            true, // proportional
            CycleMethod.NO_CYCLE, // cycle colors
            // stops
            new Stop(0.1f, Color.rgb(255, 0, 0, .3)),
            new Stop(0.5f, Color.rgb(127, 0, 127, .3)),
            new Stop(1.0f, Color.rgb(0, 0, 255, .3)));

                polygon.getPoints().addAll(new Double[]{
                    x,y,
                    x, getYAxis().getDisplayPosition(SysPoint.getYValue()),   
                      x2,getYAxis().getDisplayPosition(systole.get((i+1)).getYValue()), 
                    x2,y2
                });
            getPlotChildren().add(polygon);
            polygon.toFront();
            polygon.setFill(linearGrad);
    }               


}

我创建了一个多边形，它连接两个收缩点和两个舒张点，并用线性渐变填充它们。

我的图表现在看起来像：

【讨论】：

哇哦渐变！真的是一个很好的解决方案，感谢您发布！