使JFreeChart CategoryPlot看起来像Flot.js条形图

Question

概述

我一直在尝试模仿JFreeCharts中显示的flot.js图表。

到目前为止，我已经成功完成了大多数元素，例如具有透明度，x和y网格线以及背景的单个条形颜色。

我现在需要实现的是：

• 单个条形边框颜色
• 纯黑色图表大纲
• 最高y轴值推到图表顶部

到目前为止我完成了什么

单独的条形边框颜色

对于单独的条形边框颜色，我发现建议使用代码的线程“Adding border color/stroke to individual Bars in Bar Chart?”

Color borderColor = buildColorMap.get(build);
renderer.setDrawBarOutline(true);
renderer.setSeriesOutlinePaint(iterator, borderColor);

而不是我目前使用的那个适用于所有酒吧

// other colors
renderer.setSeriesOutlinePaint(3, new Color(213, 94, 0));
renderer.setSeriesOutlinePaint(4, new Color(204, 121, 167));
renderer.setSeriesOutlineStroke(0, new BasicStroke(2.5f));

图表大纲

对于图表的大纲，我看到setOutlineStroke，但API说

  

已过时。不应再使用此方法（从版本1.0.6开始）。依靠setSeriesOutlineStroke(int, Stroke)和setBaseOutlineStroke(Stroke)就足够了。   设置ALL系列的大纲笔划，并向所有已注册的侦听器发送RendererChangeEvent。

因此我去了setBaseOutlineStroke但没有发生任何事情（仍然与上面的照片相同）！

renderer.setBaseOutlineStroke(new BasicStroke(2.5f), true);

flot.js - 像y轴处理和定位

对于flot.js中的y轴编号，我能够使用函数模拟其选择最高y值十的上限作为图表上限的行为（其中数据放在一个double数组;只有五个实例，因此我不需要更复杂的数据结构）：

private static double getHighestArrayValue(double[] array) {
    double max = 0;
    for (int i = 1; i < array.length; i++) {
        if (array[i] > max) {
            max = array[i];
        }
    }
    return max;
}

private static double getRoundedUpMultipleOfTen(double number) {
    return ((number + 9) / 10) * 10;
}

其中生成图表的用法是：

CategoryPlot plot = ...

final NumberAxis rangeAxis = (NumberAxis) plot.getRangeAxis();
rangeAxis.setStandardTickUnits(NumberAxis.createIntegerTickUnits());
rangeAxis.setRange(0, 
   getRoundedUpMultipleOfTen(getHighestArrayValue(dataValues)));
rangeAxis.setTickUnit(new NumberTickUnit(10));

导致

现在的问题是如何将50推到图表的顶部，我不知道该怎么做。

---

以下是我感兴趣的人的完整代码（“Generate Pie Chart/Bar Graph In PDF Using IText & JFreeChart”修改后的Viral Patel代码：

import java.awt.BasicStroke;
import java.awt.Color;
import java.awt.Graphics2D;
import java.awt.Paint;
import java.awt.geom.Rectangle2D;
import java.io.FileOutputStream;

import org.jfree.chart.ChartFactory;
import org.jfree.chart.JFreeChart;
import org.jfree.chart.StandardChartTheme;
import org.jfree.chart.axis.NumberAxis;
import org.jfree.chart.axis.NumberTickUnit;
import org.jfree.chart.plot.CategoryPlot;
import org.jfree.chart.plot.PlotOrientation;
import org.jfree.chart.renderer.category.BarRenderer;
import org.jfree.chart.renderer.category.CategoryItemRenderer;
import org.jfree.chart.renderer.category.StandardBarPainter;
import org.jfree.data.category.DefaultCategoryDataset;

import com.itextpdf.text.Document;
import com.itextpdf.text.Font;
import com.itextpdf.text.PageSize;
import com.itextpdf.text.pdf.PdfContentByte;
import com.itextpdf.text.pdf.PdfTemplate;
import com.itextpdf.text.pdf.PdfWriter;

public class ChartDemo {
    public static void main(String[] args) {
        writeChartToPDF(generateBarChart(), 800, 500, "D://barchart.pdf");
    }

    public static void writeChartToPDF(JFreeChart chart, int width, int height,
            String fileName) {
        PdfWriter writer = null;
        Document document = new Document(PageSize.A4.rotate(), 0, 0, 0, 0);

        try {
            writer = PdfWriter.getInstance(document, new FileOutputStream(
                    fileName));
            document.open();
            PdfContentByte contentByte = writer.getDirectContent();

            PdfTemplate template = contentByte.createTemplate(width, height);
            Graphics2D graphics2d = template.createGraphics(width, height);
            // controls size of image
            Rectangle2D rectangle2d = new Rectangle2D.Double(10, -10, width,
                    height);

            chart.draw(graphics2d, rectangle2d);

            graphics2d.dispose();
            contentByte.addTemplate(template, 0, 0);

        } catch (Exception e) {
            e.printStackTrace();
        }
        document.close();
    }

    static class CustomRenderer extends BarRenderer {

        private Paint[] colors;

        int transparency = 95;

        // http://www.cookbook-r.com/Graphs/Colors_(ggplot2)/
        public CustomRenderer() {
            this.colors = new Paint[] { new Color(1, 158, 115, transparency),
                    new Color(240, 228, 66, transparency),
                    new Color(0, 114, 178, transparency),
                    new Color(213, 94, 0, transparency),
                    new Color(204, 121, 167, transparency) };
        }

        public Paint getItemPaint(final int row, final int column) {
            return this.colors[column % this.colors.length];
        }
    }

    public static JFreeChart generateBarChart() {

        double[] dataValues = { 40.66, 37.82, 43.16, 32.62, 41.39 };
        Paint[] colors = { new Color(1, 158, 115), new Color(240, 228, 66),
                new Color(0, 114, 178), new Color(213, 94, 0),
                new Color(204, 121, 167) };

        DefaultCategoryDataset dataSet = new DefaultCategoryDataset();
        for (int i = 0; i < dataValues.length; i++) {
            dataSet.setValue(dataValues[i], "Population", (i + 1) * 2 + "");
        }

        ChartFactory.setChartTheme(StandardChartTheme.createLegacyTheme());
        JFreeChart chart = ChartFactory.createBarChart("", "Team number",
                "Solved problems (%)", dataSet, PlotOrientation.VERTICAL,
                false, true, false);
        chart.setBackgroundPaint(Color.WHITE);

        final CategoryPlot plot = chart.getCategoryPlot();
        ((BarRenderer) plot.getRenderer())
                .setBarPainter(new StandardBarPainter());

        plot.setBackgroundPaint(Color.WHITE);

        plot.setDomainGridlinesVisible(true);
        plot.setRangeGridlinesVisible(true);

        plot.setDomainGridlineStroke(new BasicStroke(0.25f));
        plot.setRangeGridlineStroke(new BasicStroke(0.25f));

        plot.setDomainGridlinePaint(new Color(204, 204, 204));
        plot.setRangeGridlinePaint(new Color(204, 204, 204));

        java.awt.Font fontGraphLabel = new java.awt.Font("Helvetica",
                Font.NORMAL, 12);
        java.awt.Font fontGraphTicks = new java.awt.Font("Helvetica",
                Font.NORMAL, 10);
        plot.getDomainAxis().setLabelFont(fontGraphLabel);
        plot.getRangeAxis().setLabelFont(fontGraphLabel);
        plot.getDomainAxis().setTickLabelFont(fontGraphTicks);
        plot.getRangeAxis().setTickLabelFont(fontGraphTicks);

        CategoryItemRenderer renderer = new CustomRenderer();
        plot.setRenderer(renderer);

        final NumberAxis rangeAxis = (NumberAxis) plot.getRangeAxis();
        rangeAxis.setStandardTickUnits(NumberAxis.createIntegerTickUnits());
        rangeAxis.setRange(0,
                getRoundedUpMultipleOfTen(getHighestArrayValue(dataValues)));
        rangeAxis.setTickUnit(new NumberTickUnit(10));

        final BarRenderer renderer1 = (BarRenderer) plot.getRenderer();
        renderer1.setDrawBarOutline(true);
        renderer1.setShadowVisible(false);

        renderer1.setSeriesOutlinePaint(0, new Color(204, 121, 167));
        renderer1.setSeriesOutlinePaint(1, new Color(213, 94, 0));
        renderer1.setSeriesOutlineStroke(0, new BasicStroke(2.5f));

        renderer1.setBaseOutlineStroke(new BasicStroke(10f), true);

        return chart;
    }

    private static double getHighestArrayValue(double[] array) {
        double max = 0;
        for (int i = 1; i < array.length; i++) {
            if (array[i] > max) {
                max = array[i];
            }
        }
        return max;
    }

    private static double getRoundedUpMultipleOfTen(double number) {
        return ((number + 9) / 10) * 10;
    }

}

Answer 1

我不是一个Java人，但我会考虑一下（所有代码未经测试）...

假设你有这样的flot代码：

<div id="placeholder" style="width:300px;height:200px"></div>

$(function() {
    var series = {data: [[0, 5.2], [1, 3], [2, 9.2], [3, 10]],
                  lines: {show: false},
                  bars: {show: true, barWidth: 0.75, align:'center'}}

    somePlot = $.plot("#placeholder", [ series ], {});    
});

您需要将此代码作为字符串，然后Base64对其进行编码（在变量base64FlotCode中）。

创建一个如下所示的phantomJS脚本（保存为phantomJSScript.js）：

var system = require('system');    
var html = system.args[1];    
var page = require('webpage').create();

page.onLoadFinished = function(status) {
    var clipRect = page.evaluate(
        function()
        { 
            var el = document.querySelector('#placeholder');
            return el.getBoundingClientRect();
        }
    );

    page.clipRect = {
        top:    clipRect.top,
        left:   clipRect.left,
        width:  clipRect.width,
        height: clipRect.height
    };
    page.render('/path/to/myPlot.png');

    phantom.exit();
};

function b64_to_utf8(str) {
    return decodeURIComponent(escape(window.atob(str)));
}

page.content = b64_to_utf8(html);

现在您可以将此脚本称为：

List<String> args = new ArrayList<String>();
args.add ("/path/to/phamtomjs.exe");
args.add ("/path/to/phantomJSScript.js");
args.add (base64FlotCode);
ProcessBuilder pb = new ProcessBuilder (args);
Process p = pb.start();
p.waitFor();

<强> EDITS

您可以将其指向您的网页，而不是将phantomJS传递给您的flot代码：

var system = require('system');      
var page = require('webpage').create();

page.open('http://www.mywebpage.com', function() {
    var clipRect = page.evaluate(
        function()
        { 
            var el = document.querySelector('#placeholder');
            return el.getBoundingClientRect();
        }
    );

    page.clipRect = {
        top:    clipRect.top,
        left:   clipRect.left,
        width:  clipRect.width,
        height: clipRect.height
    };
    page.render('/path/to/myPlot.png');

    phantom.exit();
};