如何用JFreeChart实现带渐变色的平滑区域图？

问题描述 #

我尝试用JFreeChart的XYAreaRenderer2实现区域图，但绘制的线条不够流畅。想要实现带渐变色的平滑区域图，该怎么操作？

当前代码 #

public static void main(String[] args) {

    // 创建数据集
    TimeSeriesCollection dataset = new TimeSeriesCollection();
    TimeSeries series = new TimeSeries("");
    List<Double> values = Lists.newArrayList(
     26900.620000,26898.430000, 26903.000000, 26895.530000, 26882.520000, 26898.770000, 26891.690000, 26899.680000,
     26908.200000,26902.770000,26902.77,26902.77,26912.630000,26908.410000
    );
    Date start = null, end = null;
    for (int i = 0; i < values.size(); i++) {
        Date time = new Date();
        if (i == 0) {
            start = time;
        }
        end = time;
        series.add(new Second(time), values.get(i));
        try {
            Thread.sleep(1000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
    }

    dataset.addSeries(series);

    JFreeChart chart = ChartFactory.createTimeSeriesChart(
            "", 
            "", 
            "", 
            dataset, 
            false, 
            false, 
            false
    );
    
    XYPlot plot = chart.getXYPlot();
   
    XYAreaRenderer2 renderer = new XYAreaRenderer2();
    renderer.setSeriesShape(0, new java.awt.geom.Ellipse2D.Double(-5.0,-5.0,10.0,10.0));
    renderer.setSeriesPaint(0, Color.BLUE);
    renderer.setOutline(true);
    renderer.setSeriesFillPaint(0, new Color(0, 0, 255, 63));
    renderer.setSeriesStroke(0, new BasicStroke(2f));
    renderer.setSeriesShape(1, new java.awt.geom.Ellipse2D.Double(-5.0,-5.0,10.0,10.0));
    renderer.setSeriesPaint(1, Color.ORANGE);
    renderer.setOutline(true);
    renderer.setSeriesFillPaint(1, new Color(255, 128, 0, 63));
    renderer.setSeriesStroke(1, new BasicStroke(2f));
    plot.setRenderer(renderer);

    double size = (series.getMaxY()- series.getMinY())/ values.size();

    
    ValueAxis yAxis = plot.getRangeAxis();
    yAxis.setAutoRangeMinimumSize(size);
    yAxis.setRange(series.getMinY()-size, series.getMaxY()+size);
    
    DateAxis xAxis = new DateAxis();
    xAxis.setRange(start, end);
    xAxis.setVisible(false);
    plot.setDomainAxis(xAxis);
    plot.getRangeAxis().setVisible(false);
    
    plot.setAxisOffset(new RectangleInsets(0d, 0d, 0d, 0d));
    
    plot.setOutlineVisible(false);
    
    plot.setBackgroundPaint(new Color(0,0,0,0));
    
    plot.setDomainGridlinesVisible(false);
    
    plot.setRangeGridlinesVisible(false);

    chart.setBackgroundPaint(new Color(0,0,0,0));
    
    try {
        File file = new File("./file/output.png");
        if (!file.getParentFile().exists()) {
        }
        ChartUtils.saveChartAsPNG(file, chart, 500, 200);
    } catch (IOException e) {
        e.printStackTrace();
    }
}

解决方案 #

要实现平滑线条+渐变色填充的区域图，从两个核心方向调整：

1. 实现线条平滑：改用XYSplineRenderer

XYAreaRenderer2默认绘制折线，XYSplineRenderer内置样条曲线平滑逻辑，直接替换即可：

// 替换原renderer创建代码
XYSplineRenderer splineRenderer = new XYSplineRenderer(10); // precision值越高，曲线越平滑，默认5
// 保留原有样式设置
splineRenderer.setSeriesShape(0, new java.awt.geom.Ellipse2D.Double(-5.0,-5.0,10.0,10.0));
splineRenderer.setSeriesPaint(0, Color.BLUE);
splineRenderer.setOutline(true);
splineRenderer.setSeriesStroke(0, new BasicStroke(2f));
// 第二个系列同理
splineRenderer.setSeriesShape(1, new java.awt.geom.Ellipse2D.Double(-5.0,-5.0,10.0,10.0));
splineRenderer.setSeriesPaint(1, Color.ORANGE);
splineRenderer.setOutline(true);
splineRenderer.setSeriesStroke(1, new BasicStroke(2f));
plot.setRenderer(splineRenderer);

2. 添加渐变色填充

将原纯色填充替换为GradientPaint，实现从曲线到X轴的渐变效果：

// 蓝色系列：从半透明蓝渐变到透明
GradientPaint blueGradient = new GradientPaint(
    0, series.getMinY(), new Color(0, 0, 255, 63),
    0, series.getMaxY(), new Color(0, 0, 255, 0)
);
splineRenderer.setSeriesFillPaint(0, blueGradient);

// 橙色系列：从半透明橙渐变到透明
GradientPaint orangeGradient = new GradientPaint(
    0, series.getMinY(), new Color(255, 128, 0, 63),
    0, series.getMaxY(), new Color(255, 128, 0, 0)
);
splineRenderer.setSeriesFillPaint(1, orangeGradient);

完整关键代码片段

// 创建平滑渲染器
XYSplineRenderer splineRenderer = new XYSplineRenderer(10);
// 设置线条样式
splineRenderer.setSeriesStroke(0, new BasicStroke(2f));
splineRenderer.setSeriesStroke(1, new BasicStroke(2f));
// 设置线条颜色
splineRenderer.setSeriesPaint(0, Color.BLUE);
splineRenderer.setSeriesPaint(1, Color.ORANGE);
// 设置渐变色填充
GradientPaint blueGradient = new GradientPaint(0, series.getMinY(), new Color(0, 0, 255, 63), 
                                              0, series.getMaxY(), new Color(0, 0, 255, 0));
splineRenderer.setSeriesFillPaint(0, blueGradient);
GradientPaint orangeGradient = new GradientPaint(0, series.getMinY(), new Color(255, 128, 0, 63), 
                                                0, series.getMaxY(), new Color(255, 128, 0, 0));
splineRenderer.setSeriesFillPaint(1, orangeGradient);
// 显示轮廓线
splineRenderer.setOutline(true);
plot.setRenderer(splineRenderer);

额外优化提示 #

• 若曲线出现异常波动，可调整XYSplineRenderer的precision参数，在5-15之间找到合适值。
• 如需水平渐变，修改GradientPaint的X坐标参数即可。

内容的提问来源于stack exchange，提问作者money fox