JavaFX折线图颜色差异

时间:2015-09-16 06:19:02

标签: java javafx

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

我希望它看起来像enter image description here

1 个答案:

答案 0 :(得分:6)

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

我像这样layoutPlotChildren()覆盖了Chart

 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);
    }               


}

我创建了一个Polygon,它连接两个Systole和两个舒张点并用LinearGradient填充它们。

我的图表现在看起来像: enter image description here