Lab Chart

scripts/labChart.js

// Lab軸の描画
function drawLChart(container, values) {
    const canvas = document.createElement('canvas');
    canvas.width = 100;
    canvas.height = 400;
    canvas.classList.add('LChart');
    container.appendChild(canvas);

    const ctx = canvas.getContext('2d');
    const chartHeight = canvas.height;
    const chartWidth = canvas.width;
    const centerY = chartHeight / 2;
    const scale = chartHeight / 10; // L値の範囲は -5 から +5

    // 軸の描画
    ctx.beginPath();
    ctx.moveTo(chartWidth / 2, 0);
    ctx.lineTo(chartWidth / 2, chartHeight);
    ctx.strokeStyle = 'black';
    ctx.stroke();

    // ラベルの描画
    ctx.fillText('+L* 5.00', 10, 10);
    ctx.fillText('0', 10, centerY);
    ctx.fillText('-L* 5.00', 10, chartHeight - 10);

    // L値の描画
    values.forEach(value => {
        const y = centerY - value.L * scale;
        ctx.beginPath();
        ctx.arc(chartWidth / 2, y, 5, 0, 2 * Math.PI);
        ctx.fillStyle = 'red';
        ctx.fill();
    });
}

// ab値のレーダーチャートの描画
function drawABChart(container, values) {
    const canvas = document.createElement('canvas');
    canvas.width = 400;
    canvas.height = 400;
    canvas.classList.add('abChart');
    container.appendChild(canvas);

    const ctx = canvas.getContext('2d');
    const chartHeight = canvas.height;
    const chartWidth = canvas.width;
    const centerX = chartWidth / 2;
    const centerY = chartHeight / 2;
    const scale = chartHeight / 10; // a, b値の範囲は -5 から +5

    // グリッドの描画
    ctx.beginPath();
    ctx.arc(centerX, centerY, scale * 5, 0, 2 * Math.PI);
    ctx.moveTo(centerX - scale * 5, centerY);
    ctx.lineTo(centerX + scale * 5, centerY);
    ctx.moveTo(centerX, centerY - scale * 5);
    ctx.lineTo(centerX, centerY + scale * 5);
    ctx.strokeStyle = 'black';
    ctx.stroke();

    // ラベルの描画
    ctx.fillText('+a*', centerX + scale * 5 + 5, centerY);
    ctx.fillText('-a*', centerX - scale * 5 - 15, centerY);
    ctx.fillText('+b*', centerX, centerY - scale * 5 - 5);
    ctx.fillText('-b*', centerX, centerY + scale * 5 + 15);

    // ab値の描画
    values.forEach(value => {
        const x = centerX + value.a * scale;
        const y = centerY - value.b * scale;
        ctx.beginPath();
        ctx.arc(x, y, 5, 0, 2 * Math.PI);
        ctx.fillStyle = 'red';
        ctx.fill();
    });
}

// 既存のビューにLabチャートを追加する関数
function addLabCharts(values) {
    const existingView = document.getElementById('existingView');
    const container = document.createElement('div');
    container.classList.add('chart-container');

    drawLChart(container, values);
    drawABChart(container, values);

    existingView.appendChild(container);
}

Lab chart

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Lab Chart</title>
    <style>
        canvas {
            border: 1px solid black;
        }
        .chart-container {
            display: flex;
            margin-bottom: 20px;
        }
        .LChart {
            width: 100px;
        }
        .abChart {
            width: 400px;
        }
    </style>
</head>
<body>
    <div id="existingView">
        <!-- 既存のビューの内容 -->
    </div>
    <script src="script.js"></script>
</body>
</html>

返信を残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です