では、前回の「凡例付き折れ線グラフ」をさらに発展させて、グリッド線（補助線）を追加して見やすくするサンプルを紹介します。
サンプルコード：グリッド線付き折れ線グラフ
import javax.swing.*;
import java.awt.*;
import java.util.*;
public class MultiLineChartWithGrid extends JPanel {
private List<Map<Integer, Integer>> datasets;
private List<String> labels;
private List<Color> colors = Arrays.asList(Color.RED, Color.BLUE, Color.GREEN, Color.ORANGE);
public MultiLineChartWithGrid(List<Map<Integer, Integer>> datasets, List<String> labels) {
this.datasets = datasets;
this.labels = labels;
setPreferredSize(new Dimension(600, 400));
}
@Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
if (datasets == null || datasets.isEmpty()) return;
int width = getWidth();
int height = getHeight();
// 軸
g.setColor(Color.BLACK);
g.drawLine(50, height - 50, width - 20, height - 50); // X軸
g.drawLine(50, 30, 50, height - 50); // Y軸
// 最大値を求める
int maxCount = 0;
for (Map<Integer, Integer> data : datasets) {
if (!data.isEmpty()) {
maxCount = Math.max(maxCount, Collections.max(data.values()));
}
}
// --- グリッド線（横方向） ---
g.setColor(Color.LIGHT_GRAY);
int gridLines = 5; // 補助線の本数
for (int i = 1; i <= gridLines; i++) {
int y = height - 50 - (i * (height - 80) / gridLines);
g.drawLine(50, y, width - 20, y);
// 目盛りラベル
int labelValue = (int) ((double) maxCount * i / gridLines);
g.setColor(Color.BLACK);
g.drawString(String.valueOf(labelValue), 20, y + 5);
g.setColor(Color.LIGHT_GRAY);
}
// データセットごとに折れ線を描画
int datasetIndex = 0;
for (Map<Integer, Integer> data : datasets) {
g.setColor(colors.get(datasetIndex % colors.size()));
List<Integer> keys = new ArrayList<>(data.keySet());
Collections.sort(keys);
int prevX = -1, prevY = -1;
int i = 0;
for (int key : keys) {
int count = data.get(key);
int x = 50 + (i * (width - 100) / (keys.size() - 1));
int y = height - 50 - (int) ((double) count / maxCount * (height - 100));
g.fillOval(x - 3, y - 3, 6, 6);
if (prevX != -1) {
g.drawLine(prevX, prevY, x, y);
}
g.drawString(String.valueOf(count), x - 5, y - 10);
prevX = x;
prevY = y;
i++;
}
datasetIndex++;
}
// --- 凡例 ---
int legendX = width - 150;
int legendY = 40;
g.setColor(Color.BLACK);
g.drawString("凡例:", legendX, legendY);
for (int i = 0; i < datasets.size(); i++) {
g.setColor(colors.get(i % colors.size()));
g.fillRect(legendX, legendY + 15 + i * 20, 15, 15);
g.setColor(Color.BLACK);
g.drawString(labels.get(i), legendX + 20, legendY + 27 + i * 20);
}
}
public static void main(String[] args) {
// ダミーデータセット
Map<Integer, Integer> dataset1 = new LinkedHashMap<>();
dataset1.put(1, 3);
dataset1.put(2, 5);
dataset1.put(3, 2);
dataset1.put(4, 7);
Map<Integer, Integer> dataset2 = new LinkedHashMap<>();
dataset2.put(1, 2);
dataset2.put(2, 4);
dataset2.put(3, 6);
dataset2.put(4, 5);
List<Map<Integer, Integer>> datasets = Arrays.asList(dataset1, dataset2);
List<String> labels = Arrays.asList("データセット1", "データセット2");
JFrame frame = new JFrame("グリッド線付き折れ線グラフ");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.add(new MultiLineChartWithGrid(datasets, labels));
frame.pack();
frame.setVisible(true);
}
}
✅ 実行イメージ
- 背景に 横方向のグリッド線 が追加され、値の比較がしやすくなります
- 左側に目盛りラベル（数値）が表示され、縦軸のスケールが直感的に理解できます
- 凡例も引き続き表示され、複数データセットを区別可能
ポイント
g.setColor(Color.LIGHT_GRAY)で補助線を描画- 目盛りラベルを付けることで数値の目安が分かりやすくなる
- グリッド線の本数は
gridLinesで調整可能
👉 これで「凡例＋グリッド線付き折れ線グラフ」が完成しました。
