Java擺動線圖

Question

我正在嘗試根據數組中保存的數據繪制折線圖。 我設法繪制了X和Y軸。 但是，當我將帶有數據的線繪制到圖形上時，它並不與X和Y軸值對齊。 我不確定如何解決。 我已經顯示了下面的代碼：

public void drawLineG(Graphics g, int yCoords[]) {
    String maxY = Integer.toString(getMax(yCoords));
    String minY = Integer.toString(getMin(yCoords));
    String maxX = Double.toString((xInterval * yCoords.length) - xInterval);
    String minX = Double.toString(xStart);

    g.setColor(Color.BLUE);
    int height = (getHeight() / 2);
    int x = 200; // start x point

    // previous coord positions.
    int prevX = x;
    int prevY = yCoords[0];

    g.setColor(Color.BLACK);
    g.drawLine(prevX, getHeight() / 2, 500, getHeight() / 2);
    g.drawLine(prevX, 200, 200, getHeight() / 2);

    g.setColor(Color.BLUE);
    g.drawString(minY, 190, (getHeight() / 2));
    g.drawString(maxY, 180, (getHeight() / 2) - 255);
    g.drawString(yLabel, 140, (getHeight() / 2) - 100);
    g.drawString(minX, 192, (getHeight() / 2) + 20);
    g.drawString(maxX, 500, (getHeight() / 2) + 20);
    g.drawString(xLabel, 350, (getHeight() / 2) + 50);
    for (int y : yCoords) {
        g.setColor(Color.RED);
        g.drawLine(prevX, height - prevY, x, height - y);
        prevX = x;
        prevY = y;

        // add an increment to the X pos.
        x = x + 50;
    }
}

我正在測試的數據數組包含以下值： 0, 3, 4, 7, 5, 10, 3

但是，將其繪制在圖形上時，它不會與x和y軸上的值對齊。

當前： https : //i.stack.imgur.com/Ju8BQ.jpg我要實現的目標： https : //i.stack.imgur.com/n9Aio.jpg

有什么幫助嗎？
謝謝

Answer 1

你的問題是你的規模，你想請你yCoords因為他們給出的（ 3, 10等），但它們應該是這樣的： 30, 100 ，以適合窗口的規模（窗口=你的程序窗口）。

例如，在下面的代碼中，每個“正方形”或每個“單位”均為30 x 30像素，因此我必須將yCoord = 3轉換為等效值，即3 * 30 = 90但軸位於以下位置，始於400我必須減去它，這樣我才能從坐標軸或從窗口底部到真實的yCoord的坐標，該坐標應為yCoord 400 - 90 = 310 ，這是我必須繪制的真實點。

但是，繪畫應在paintComponent方法中完成。

對於我的示例，我沒有繪制0、10、0.0、90.0的字符串0, 10, 0.0, 90.0但是如果需要，可以稍后再做

import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Graphics2D;

import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;

public class GraphSample {
    private JFrame frame;

    public static void main(String[] args) {
        SwingUtilities.invokeLater(new GraphSample()::createAndShowGui);
    }

    private void createAndShowGui() {
        frame = new JFrame(getClass().getSimpleName());

        GraphDrawer drawer = new GraphDrawer(new int[] {0, 3, 4, 7, 5, 10, 3});

        frame.add(drawer);
        frame.pack();
        frame.setVisible(true);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    }

    @SuppressWarnings("serial")
    class GraphDrawer extends JPanel {
        private int[] yCoords;
        private int startX = 100;
        private int startY = 100;
        private int endX = 400;
        private int endY = 400;
        private int unitX = (endX - startX) / 10;
        private int unitY = (endY - startY) / 10;
        private int prevX = startX;
        private int prevY = endY;

        public GraphDrawer(int[] yCoords) {
            this.yCoords = yCoords;
        }

        @Override
        protected void paintComponent(Graphics g) {
            super.paintComponent(g);
            Graphics2D g2d = (Graphics2D) g;

            //We draw in the following 2 loops the grid so it's visible what I explained before about each "unit"
            g2d.setColor(Color.BLUE);
            for (int i = startX; i <= endX; i += unitX) {
                g2d.drawLine(i, startY, i, endY);
            }

            for (int i = startY; i <= endY; i += unitY) {
                g2d.drawLine(startX, i, endX, i);
            }

            //We draw the axis here instead of before because otherwise they would become blue colored.
            g2d.setColor(Color.BLACK);
            g2d.drawLine(startX, startY, startX, endY);
            g2d.drawLine(startX, endY, endX, endY);

            //We draw each of our coords in red color
            g2d.setColor(Color.RED);
            for (int y : yCoords) {
                g2d.drawLine(prevX, prevY, prevX += unitX, prevY = endY - (y * unitY));
            }
        }

        @Override
        public Dimension getPreferredSize() {
            return new Dimension(endX + 100, endY + 100);
        }
    }
}

我希望清楚錯誤是什么。

這是一個10 x 10網格的輸出示例