[英]Java Swing Line Graph
I'm attempting to draw a line graph based on data held in array. 我正在尝试根据数组中保存的数据绘制折线图。 I have managed to get the X and Y axis drawn.
我设法绘制了X和Y轴。 However when I draw the line with the data onto the graph it does not line up with the X and Y axis values.
但是,当我将带有数据的线绘制到图形上时,它并不与X和Y轴值对齐。 I am unsure of how this can be fixed.
我不确定如何解决。 I have shown the code below:
我已经显示了下面的代码:
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;
}
}
The array of data I have been testing contains the values: 0, 3, 4, 7, 5, 10, 3
我正在测试的数据数组包含以下值:
0, 3, 4, 7, 5, 10, 3
However when this is plotted on the graph it doesn't line up with the values on the x and y axis. 但是,将其绘制在图形上时,它不会与x和y轴上的值对齐。
Current: https://i.stack.imgur.com/Ju8BQ.jpg What I am trying to achieve: https://i.stack.imgur.com/n9Aio.jpg 当前: https : //i.stack.imgur.com/Ju8BQ.jpg我要实现的目标: https : //i.stack.imgur.com/n9Aio.jpg
Any help? 有什么帮助吗?
Thanks 谢谢
Your problem is your scale, you're trying to draw your yCoords
as they're given, ( 3, 10
and so on) but they should be like: 30, 100
to fit the window's scale (Window = your program window). 你的问题是你的规模,你想请你
yCoords
因为他们给出的( 3, 10
等),但它们应该是这样的: 30, 100
,以适合窗口的规模(窗口=你的程序窗口)。
For example in my code below, each "square" or each "unit" are of 30 x 30
pixels each, so I must convert yCoord = 3
to it's equivalent which would be 3 * 30 = 90
but as the axis is below starting at 400
I must substract it so I get the coord from the axis or from the bottom of the window to the real yCoord
which would be 400 - 90 = 310
, now this is my real point that I must paint. 例如,在下面的代码中,每个“正方形”或每个“单位”均为
30 x 30
像素,因此我必须将yCoord = 3
转换为等效值,即3 * 30 = 90
但轴位于以下位置,始于400
我必须减去它,这样我才能从坐标轴或从窗口底部到真实的yCoord
的坐标,该坐标应为yCoord
400 - 90 = 310
,这是我必须绘制的真实点。
However the painting should be done in the paintComponent
method. 但是,绘画应在
paintComponent
方法中完成。
For my example I didn't draw the Strings for 0, 10, 0.0, 90.0
but you can do it later if you wish 对于我的示例,我没有绘制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);
}
}
}
I hope it's clear what the error was. 我希望清楚错误是什么。
This is a sample of what the output looks like with a 10 x 10 grid 这是一个10 x 10网格的输出示例
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.