在Java中绘制简单的折线图

Question

在我的程序中，我想绘制一个简单的得分趋势图。我有一个文本文件，每一行都是一个整数分数，我读入并想将其作为参数传递给我的图表类。我在实现图表类方面遇到了一些困难，我看到的所有示例都将其方法放在与main函数相同的类中，但我没有这样做。

我希望能够将我的数组传递给对象并生成图表，但是当调用我的paint方法时，它要求我提供一个Graphics g...以下是我目前的代码:

public class Graph extends JPanel {

    public void paintGraph (Graphics g){

        ArrayList<Integer> scores = new ArrayList<Integer>(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<Integer> scores = new ArrayList<Integer>(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);
        }
    }
}

- user1058210

---

你的代码表明你还没有阅读有关如何进行Swing图形操作的教程，你需要在尝试这些操作之前先学习。没有什么可以替代它。例如，你需要重写paintComponent方法，但我在你的代码中没有看到这个方法。你可以从这里开始：执行自定义绘制。 - Hovercraft Full Of Eels

@AndrewThompson，对此我感到很抱歉——我知道这不是一个有效的借口——只是想有些人能够理解我所处的状态，原谅我问题中缺乏精确性，也许可以推断出问题，即使我没有完全明确。PetarMinchev，感谢您能够做到这一点！ - user1058210

另外，由于 x 轴的增量为1，因此它会非常压缩。您可能希望通过将两者乘以比例因子来扩大x轴（和y轴）的大小。 - Hovercraft Full Of Eels

另外，当你在那个for循环中尝试调用get(i + 1)时，你的代码不会抛出数组越界异常吗？ - Hovercraft Full Of Eels

@HovercraftFullOfEels 嘿，抱歉我试了一下你的建议！这个数组的另一个好处是我把最大值改为减一了 - 也许它没有抛出异常是因为 ArrayList 的扩展能力？ - user1058210

Answer 1

你的代码问题和建议：

• 你需要更改组件的首选大小（在这里是Graph JPanel），而不是大小。
• 不要设置JFrame的边界。
• 在向JFrame添加组件之后，调用pack()方法，然后再调用setVisible(true)方法。
• 由于列表长度为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<Integer> scores;

   public DrawGraph(List<Integer> 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<Point> graphPoints = new ArrayList<Point>();
      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<Integer> scores = new ArrayList<Integer>();
      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

---

它成功了 - 就是折线图被绘制出来了！感谢您对我的耐心等待！唯一的问题是，由于某种原因，Eclipse没有识别setPreferredSize方法 - 我已经检查了API，它仍然得到完全支持 - 不知道发生了什么，但我希望可以自己解决这个问题 - 再次感谢！ - user1058210

@user1058210：你一定是在错误的使用它。请展示一下你尝试调用它的方式。你是在构造函数或方法块之外调用它吗？ - Hovercraft Full Of Eels

Answer 2

补充Hovercraft Full Of Eels的解决方案：

我重构了他的代码，并进行了一些调整，添加了网格、轴标签，现在Y轴从最小值到最大值。我计划添加几个getter/setter，但我不需要它们，如果您想要可以添加。

这是Gist链接，我也会将代码粘贴在下面：GraphPanel在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<Double> scores;

    public GraphPanel(List<Double> 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<Point> 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<Double> scores) {
        this.scores = scores;
        invalidate();
        this.repaint();
    }

    public List<Double> getScores() {
        return scores;
    }

    private static void createAndShowGui() {
        List<Double> 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();
         }
      });
   }
}

看起来是这样的：

- Rodrigo Castro

---

你可以定义类似 int graphWidth = getWidth() - 2 * padding - labelPadding; int graphHeight = getHeight() - 2 * padding - labelPadding; 这样的内容，以避免每次计算位置。 - xi.lin

Answer 3

或者简单地使用JFreechart库 - http://www.jfree.org/jfreechart/。

- DejanLekic

---

是的，很可能是“正确”的解决方案，假设这不受典型作业限制。 - Hovercraft Full Of Eels

然而，对于一些简单的事情，完全可以避免使用整个库。上一个答案对于一些简单的任务已经足够了。 - toto_tico

如果存在相应的库函数，使用它来完成任务几乎总是更好的解决方案，即使是简单情况也是如此。这样可以用更少的时间得到更好的结果。 - Florian F

Answer 4

有许多开源项目可帮助您处理所有线图的绘制工作，只需几行代码即可完成。以下是使用XChart库从文本(CSV)文件中绘制线图的方法。免责声明:我是该项目的首席开发者。

在此示例中，./CSV/CSVChartRows/目录下存在两个文本文件。请注意，文件中的每一行表示要绘制的数据点，而每个文件表示不同的系列。series1包含x、y和误差条数据，而series2仅包含x和y数据。

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

生成的图表

- herrtim

Answer 5

重写面板的paintComponent方法，以便您可以自定义绘制。像这样：

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

- Petar Minchev

---

谢谢你的帮助，Petar - 我已经重写了paintComponent方法，并在你指出的部分实现了我的代码，但它仍然没有显示。在我的构造函数中，我还插入了setSize(500, 500)以确保JPanel可见，但不幸的是这也没有解决问题。我已经编辑了我的帖子，展示了我在主语句中编写的内容，看看是否有任何帮助。 - user1058210

@user1058210：大多数布局管理器通常不会遵循setSize，而preferredSizes通常会。您需要显示带有paintComponent方法的新代码。此外，您确定您的paintComponent方法是真正的方法覆盖吗？为确保，请在其上方放置@Override注释以让编译器为您检查。如果您仍然卡住，请考虑创建一个小的可编译可运行程序来演示您的问题，即sscce，然后在此处发布它。 - Hovercraft Full Of Eels

@HovercraftFullOfEels 感谢您的帮助 - 我尝试实现了preferredSize方法，但它似乎已经过时了。您所说的“你需要用paintComponent方法展示你的新代码”，是什么意思？您是指我应该在我的主函数中明确引用它，比如：graph.paintComponent(g)吗？我认为paintComponent方法是自动调用的，在重写后会自动调用我的代码。感谢您提到缩放的问题！我之前没有意识到这一点。我现在会制作一个SSCCE。 - user1058210

要设置组件的首选大小，您可以调用setPreferredSize(...)（抱歉Kleopatra），或者覆盖getPreferredSize()。是的，paintComponent和paint是您不直接调用的方法。我在谈论您在对此答案的第一条评论中声明的自己的paintComponent覆盖方法 - 您需要向我们展示它。 - Hovercraft Full Of Eels

@user1058210 - 你应该在面板上调用repaint()方法。然后paintComponent方法会自动被调用。你不应该直接调用它。 - Petar Minchev

Answer 6

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）而不是随机值，则可以看到它）

- DarkW

---

我也遇到了同样的问题。从高度中减去会翻转图形，因为它实际上是反向绘制的。 - Rarw