Disegnare un semplice grafico a linee in Java

Nel mio programma voglio disegnare un semplice grafico a linee. Ho un file di testo e su ogni riga è un punteggio intero, che ho letto e voglio passare come argomento alla mia class di grafico. Sto avendo qualche problema nell’implementare la class del grafico e tutti gli esempi che ho visto hanno i loro metodi nella stessa class del loro principale, cosa che non avrò.

Voglio essere in grado di passare il mio array all’object e generare un grafico, ma quando chiamo il mio metodo paint mi sta chiedendo un Graphics g … Questo è quello che ho finora:

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

Per ora ho inserito un semplice generatore di numeri casuali per riempire il mio array.

Ho un frame esistente e fondamentalmente voglio istanziare la class Graph e montare il pannello sul mio frame. Sono davvero dispiaciuto che questa domanda mi sia sembrata così confusa, ma ho dormito poco …

Il codice nella mia dichiarazione principale è:

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

    Non sono sicuro di cosa sia un SSCE ma questo è il mio tentativo in uno:

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

    Problemi con il codice e i suggerimenti:

    • Anche in questo caso è necessario modificare il preferito Dimensione del componente (qui il grafico JPanel), non la dimensione
    • Non impostare i limiti di JFrame.
    • Call pack() sul tuo JFrame dopo aver aggiunto componenti ad esso e prima di chiamare setVisible (true)
    • Il tuo ciclo foreach non funzionerà poiché la dimensione del tuo ArrayList è 0 (testalo per vedere che questo è corretto). Usa invece un ciclo for che va da 0 a 10.
    • Non dovresti avere una logica di programma all’interno del tuo paintComponent(...) ma solo codice di pittura. Quindi renderei ArrayList una variabile di class e inserirla all’interno del costruttore della class.

    Per esempio:

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

    Che creerà un grafico che assomiglia a questo: inserisci la descrizione dell'immagine qui

    Basta integrare la soluzione di Hovercraft Full Of Eels:

    Ho rielaborato il suo codice, ottimizzato un po ‘, aggiungendo una griglia, le etichette degli assi e ora l’asse Y passa dal valore minimo presente al valore massimo. Ho pianificato di aggiungere un paio di getter / setter ma non ne ho avuto bisogno, puoi aggiungerli se vuoi.

    Ecco il link Gist, incollerò anche il codice qui sotto: GraphPanel su 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(); } }); } } 

    Sembra questo: Foto di esempio

    O semplicemente usa la libreria JFreechart – http://www.jfree.org/jfreechart/ .

    Esistono molti progetti open source che gestiscono tutti i disegni di grafici a linee per te con un paio di linee di codice. Ecco come è ansible disegnare un grafico a linee da dati in un file di testo di coppia ( CSV ) con la libreria XChart . Disclaimer: sono lo sviluppatore principale del progetto.

    In questo esempio, esistono due file di testo in ./CSV/CSVChartRows/ . Si noti che ogni riga nei file rappresenta un punto dati da tracciare e che ogni file rappresenta una serie diversa. series1 contiene x , y e dati della error bar , mentre series2 contiene solo x e y , dati.

    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 

    Codice sorgente

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

    Trama risultante

    inserisci la descrizione dell'immagine qui

    Sostituisci il metodo paintComponent del tuo pannello in modo da poter disegnare su misura. Come questo:

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

    La risposta di Hovercraft Full Of Eels è molto buona, ma ho dovuto cambiarla un po ‘per farlo funzionare sul mio programma:

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

    invece di

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

    perché se usassi la sua strada la grafica sarebbe capovolta

    (lo vedresti se avessi usato valori codificati (es. 1,3,5,7,9) invece di valori casuali)