用Java绘制一个简单的折线图

在我的程序中,我想绘制一个简单的分数线图。 我有一个文本文件,每行都是一个整数分数,我读入并希望作为参数传递给我的图形类。 我在实现图形类时遇到了一些麻烦,我见过的所有示例都将它们的方法与它们的主要方法放在同一个类中,我不会这样做。

我希望能够将我的数组传递给对象并生成一个图形,但是在调用我的paint方法时,它要求我使用Graphics g …这是我到目前为止所拥有的:

public class Graph extends JPanel { public void paintGraph (Graphics g){ ArrayList scores = new ArrayList(10); Random r = new Random(); for (int i : scores){ i = r.nextInt(20); System.out.println(r); } int y1; int y2; for (int i = 0; i < scores.size(); i++){ y1 = scores.get(i); y2 = scores.get(i+1); g.drawLine(i, y1, i+1, y2); } } } 

现在我已插入一个简单的随机数生成器来填充我的数组。

我有一个现有的框架,基本上想要实例化Graph类并将面板安装到我的框架上。 我真的很抱歉这个问题看起来如此混乱,但我睡不着觉……

我主要陈述中的代码是:

 testFrame = new JFrame(); testFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); Graph graph = new Graph(); testFrame.add(graph); 

我不确定SSCE究竟是什么,但这是我的尝试:

 public class Test { JFrame testFrame; public Test() { testFrame = new JFrame(); testFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); Graph graph = new Graph(); testFrame.add(graph); testFrame.setBounds(100, 100, 764, 470); testFrame.setVisible(true); } 

Graph.java

 public class Graph extends JPanel { public Graph() { setSize(500, 500); } @Override public void paintComponent(Graphics g) { Graphics2D gr = (Graphics2D) g; // This is if you want to use Graphics2D // Now do the drawing here ArrayList scores = new ArrayList(10); Random r = new Random(); for (int i : scores) { i = r.nextInt(20); System.out.println(r); } int y1; int y2; for (int i = 0; i < scores.size() - 1; i++) { y1 = (scores.get(i)) * 10; y2 = (scores.get(i + 1)) * 10; gr.drawLine(i * 10, y1, (i + 1) * 10, y2); } } } 

您的代码和建议存在问题:

  • 您需要再次更改组件的preferredSize(此处为Graph JPanel),而不是大小
  • 不要设置JFrame的界限。
  • 在向组件添加组件之后和调用setVisible之前调用JFrame上的pack() (true)
  • 由于ArrayList的大小为0,因此你的foreach循环将无效(测试它是否正确)。 而是使用从0到10的for循环。
  • 你不应该在paintComponent(...)方法中有程序逻辑,而只能绘制代码。 所以我将使ArrayList成为一个类变量并将其填充到类的构造函数中。

例如:

 import java.awt.BasicStroke; import java.awt.Color; import java.awt.Dimension; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.Point; import java.awt.RenderingHints; import java.awt.Stroke; import java.util.ArrayList; import java.util.List; import java.util.Random; import javax.swing.*; @SuppressWarnings("serial") public class DrawGraph extends JPanel { private static final int MAX_SCORE = 20; private static final int PREF_W = 800; private static final int PREF_H = 650; private static final int BORDER_GAP = 30; private static final Color GRAPH_COLOR = Color.green; private static final Color GRAPH_POINT_COLOR = new Color(150, 50, 50, 180); private static final Stroke GRAPH_STROKE = new BasicStroke(3f); private static final int GRAPH_POINT_WIDTH = 12; private static final int Y_HATCH_CNT = 10; private List scores; public DrawGraph(List scores) { this.scores = scores; } @Override protected void paintComponent(Graphics g) { super.paintComponent(g); Graphics2D g2 = (Graphics2D)g; g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON); double xScale = ((double) getWidth() - 2 * BORDER_GAP) / (scores.size() - 1); double yScale = ((double) getHeight() - 2 * BORDER_GAP) / (MAX_SCORE - 1); List graphPoints = new ArrayList(); for (int i = 0; i < scores.size(); i++) { int x1 = (int) (i * xScale + BORDER_GAP); int y1 = (int) ((MAX_SCORE - scores.get(i)) * yScale + BORDER_GAP); graphPoints.add(new Point(x1, y1)); } // create x and y axes g2.drawLine(BORDER_GAP, getHeight() - BORDER_GAP, BORDER_GAP, BORDER_GAP); g2.drawLine(BORDER_GAP, getHeight() - BORDER_GAP, getWidth() - BORDER_GAP, getHeight() - BORDER_GAP); // create hatch marks for y axis. for (int i = 0; i < Y_HATCH_CNT; i++) { int x0 = BORDER_GAP; int x1 = GRAPH_POINT_WIDTH + BORDER_GAP; int y0 = getHeight() - (((i + 1) * (getHeight() - BORDER_GAP * 2)) / Y_HATCH_CNT + BORDER_GAP); int y1 = y0; g2.drawLine(x0, y0, x1, y1); } // and for x axis for (int i = 0; i < scores.size() - 1; i++) { int x0 = (i + 1) * (getWidth() - BORDER_GAP * 2) / (scores.size() - 1) + BORDER_GAP; int x1 = x0; int y0 = getHeight() - BORDER_GAP; int y1 = y0 - GRAPH_POINT_WIDTH; g2.drawLine(x0, y0, x1, y1); } Stroke oldStroke = g2.getStroke(); g2.setColor(GRAPH_COLOR); g2.setStroke(GRAPH_STROKE); for (int i = 0; i < graphPoints.size() - 1; i++) { int x1 = graphPoints.get(i).x; int y1 = graphPoints.get(i).y; int x2 = graphPoints.get(i + 1).x; int y2 = graphPoints.get(i + 1).y; g2.drawLine(x1, y1, x2, y2); } g2.setStroke(oldStroke); g2.setColor(GRAPH_POINT_COLOR); for (int i = 0; i < graphPoints.size(); i++) { int x = graphPoints.get(i).x - GRAPH_POINT_WIDTH / 2; int y = graphPoints.get(i).y - GRAPH_POINT_WIDTH / 2;; int ovalW = GRAPH_POINT_WIDTH; int ovalH = GRAPH_POINT_WIDTH; g2.fillOval(x, y, ovalW, ovalH); } } @Override public Dimension getPreferredSize() { return new Dimension(PREF_W, PREF_H); } private static void createAndShowGui() { List scores = new ArrayList(); Random random = new Random(); int maxDataPoints = 16; int maxScore = 20; for (int i = 0; i < maxDataPoints ; i++) { scores.add(random.nextInt(maxScore)); } DrawGraph mainPanel = new DrawGraph(scores); JFrame frame = new JFrame("DrawGraph"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.getContentPane().add(mainPanel); frame.pack(); frame.setLocationByPlatform(true); frame.setVisible(true); } public static void main(String[] args) { SwingUtilities.invokeLater(new Runnable() { public void run() { createAndShowGui(); } }); } } 

这将创建一个如下图形: 在此处输入图像描述

只是补充Hovercraft Full Of Eels的解决方案:

我重新编写了他的代码,调整了一下,添加了一个网格,轴标签,现在Y轴从最小值变为最大值。 我计划添加几个getter / setter但我不需要它们,你可以根据需要添加它们。

这是Gist链接,我还将粘贴下面的代码: GraphPanel on Gist

 import java.awt.BasicStroke; import java.awt.Color; import java.awt.Dimension; import java.awt.FontMetrics; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.Point; import java.awt.RenderingHints; import java.awt.Stroke; import java.util.ArrayList; import java.util.List; import java.util.Random; import javax.swing.JFrame; import javax.swing.JPanel; import javax.swing.SwingUtilities; public class GraphPanel extends JPanel { private int width = 800; private int heigth = 400; private int padding = 25; private int labelPadding = 25; private Color lineColor = new Color(44, 102, 230, 180); private Color pointColor = new Color(100, 100, 100, 180); private Color gridColor = new Color(200, 200, 200, 200); private static final Stroke GRAPH_STROKE = new BasicStroke(2f); private int pointWidth = 4; private int numberYDivisions = 10; private List scores; public GraphPanel(List scores) { this.scores = scores; } @Override protected void paintComponent(Graphics g) { super.paintComponent(g); Graphics2D g2 = (Graphics2D) g; g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON); double xScale = ((double) getWidth() - (2 * padding) - labelPadding) / (scores.size() - 1); double yScale = ((double) getHeight() - 2 * padding - labelPadding) / (getMaxScore() - getMinScore()); List graphPoints = new ArrayList<>(); for (int i = 0; i < scores.size(); i++) { int x1 = (int) (i * xScale + padding + labelPadding); int y1 = (int) ((getMaxScore() - scores.get(i)) * yScale + padding); graphPoints.add(new Point(x1, y1)); } // draw white background g2.setColor(Color.WHITE); g2.fillRect(padding + labelPadding, padding, getWidth() - (2 * padding) - labelPadding, getHeight() - 2 * padding - labelPadding); g2.setColor(Color.BLACK); // create hatch marks and grid lines for y axis. for (int i = 0; i < numberYDivisions + 1; i++) { int x0 = padding + labelPadding; int x1 = pointWidth + padding + labelPadding; int y0 = getHeight() - ((i * (getHeight() - padding * 2 - labelPadding)) / numberYDivisions + padding + labelPadding); int y1 = y0; if (scores.size() > 0) { g2.setColor(gridColor); g2.drawLine(padding + labelPadding + 1 + pointWidth, y0, getWidth() - padding, y1); g2.setColor(Color.BLACK); String yLabel = ((int) ((getMinScore() + (getMaxScore() - getMinScore()) * ((i * 1.0) / numberYDivisions)) * 100)) / 100.0 + ""; FontMetrics metrics = g2.getFontMetrics(); int labelWidth = metrics.stringWidth(yLabel); g2.drawString(yLabel, x0 - labelWidth - 5, y0 + (metrics.getHeight() / 2) - 3); } g2.drawLine(x0, y0, x1, y1); } // and for x axis for (int i = 0; i < scores.size(); i++) { if (scores.size() > 1) { int x0 = i * (getWidth() - padding * 2 - labelPadding) / (scores.size() - 1) + padding + labelPadding; int x1 = x0; int y0 = getHeight() - padding - labelPadding; int y1 = y0 - pointWidth; if ((i % ((int) ((scores.size() / 20.0)) + 1)) == 0) { g2.setColor(gridColor); g2.drawLine(x0, getHeight() - padding - labelPadding - 1 - pointWidth, x1, padding); g2.setColor(Color.BLACK); String xLabel = i + ""; FontMetrics metrics = g2.getFontMetrics(); int labelWidth = metrics.stringWidth(xLabel); g2.drawString(xLabel, x0 - labelWidth / 2, y0 + metrics.getHeight() + 3); } g2.drawLine(x0, y0, x1, y1); } } // create x and y axes g2.drawLine(padding + labelPadding, getHeight() - padding - labelPadding, padding + labelPadding, padding); g2.drawLine(padding + labelPadding, getHeight() - padding - labelPadding, getWidth() - padding, getHeight() - padding - labelPadding); Stroke oldStroke = g2.getStroke(); g2.setColor(lineColor); g2.setStroke(GRAPH_STROKE); for (int i = 0; i < graphPoints.size() - 1; i++) { int x1 = graphPoints.get(i).x; int y1 = graphPoints.get(i).y; int x2 = graphPoints.get(i + 1).x; int y2 = graphPoints.get(i + 1).y; g2.drawLine(x1, y1, x2, y2); } g2.setStroke(oldStroke); g2.setColor(pointColor); for (int i = 0; i < graphPoints.size(); i++) { int x = graphPoints.get(i).x - pointWidth / 2; int y = graphPoints.get(i).y - pointWidth / 2; int ovalW = pointWidth; int ovalH = pointWidth; g2.fillOval(x, y, ovalW, ovalH); } } // @Override // public Dimension getPreferredSize() { // return new Dimension(width, heigth); // } private double getMinScore() { double minScore = Double.MAX_VALUE; for (Double score : scores) { minScore = Math.min(minScore, score); } return minScore; } private double getMaxScore() { double maxScore = Double.MIN_VALUE; for (Double score : scores) { maxScore = Math.max(maxScore, score); } return maxScore; } public void setScores(List scores) { this.scores = scores; invalidate(); this.repaint(); } public List getScores() { return scores; } private static void createAndShowGui() { List scores = new ArrayList<>(); Random random = new Random(); int maxDataPoints = 40; int maxScore = 10; for (int i = 0; i < maxDataPoints; i++) { scores.add((double) random.nextDouble() * maxScore); // scores.add((double) i); } GraphPanel mainPanel = new GraphPanel(scores); mainPanel.setPreferredSize(new Dimension(800, 600)); JFrame frame = new JFrame("DrawGraph"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.getContentPane().add(mainPanel); frame.pack(); frame.setLocationRelativeTo(null); frame.setVisible(true); } public static void main(String[] args) { SwingUtilities.invokeLater(new Runnable() { public void run() { createAndShowGui(); } }); } } 

它看起来像这样: 示例图片

或者只是使用JFreechart库 – http://www.jfree.org/jfreechart/

有许多开源项目可以通过几行代码处理所有的折线图。 以下是如何使用XChart库从一对文本( CSV )文件中的数据绘制折线图。 免责声明:我是该项目的首席开发人员。

在此示例中,./ ./CSV/CSVChartRows/存在两个文本文件。 请注意,文件中的每一行代表一个要绘制的数据点,每个文件代表一个不同的系列。 series1包含xyerror bar数据,而series2只包含xy数据。

series1.csv

 1,12,1.4 2,34,1.12 3,56,1.21 4,47,1.5 

series2.csv

 1,56 2,34 3,12 4,26 

源代码

 public class CSVChartRows { public static void main(String[] args) throws Exception { // import chart from a folder containing CSV files XYChart chart = CSVImporter.getChartFromCSVDir("./CSV/CSVChartRows/", DataOrientation.Rows, 600, 400); // Show it new SwingWrapper(chart).displayChart(); } } 

结果图

在此处输入图像描述

覆盖面板的paintComponent方法,以便自定义绘制。 喜欢这个:

 @Override public void paintComponent(Graphics g) { Graphics2D gr = (Graphics2D) g; //this is if you want to use Graphics2D //now do the drawing here ... } 

Hovercraft Full Of Eels的答案非常好,但为了让它在我的程序中工作,我不得不改变它:

 int y1 = (int) ((this.height - 2 * BORDER_GAP) - (values.get(i) * yScale - BORDER_GAP)); 

代替

 int y1 = (int) (scores.get(i) * yScale + BORDER_GAP); 

因为如果我用他的方式,图形将是颠倒的

(如果您使用硬编码值(例如1,3,5,7,9)而不是随机值,您会看到它)