php/spidera.php at main · kim-heesuk/php · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<?php
print_r($_POST);

$data1 = [2.51, 1.26, -2.45, 0.19];
$labels1 = ["년중최대손익", "월중최대손익", "년중최대손실", "월중최대손실"];

$data2 = [100, 33.33, 0, -66.67];
$labels2 = ["년승률", "월승률", "년손실율", "월손실율"];

$data3 = [20.74, 12.25, -40.81, -18.38];
$labels3 = ["년수익", "월수익", "년손실", "월손실"];
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>스파이더 그래프</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        .chart-container {
            width: 30%;
            height: 400px;
            display: inline-block;
            margin: 1%;
        }
        canvas {
            width: 100% !important;
            height: 100% !important;
        }
    </style>
</head>
<body>
    <div class="chart-container">
        <canvas id="spiderChart1"></canvas>
    </div>
    <div class="chart-container">
        <canvas id="spiderChart2"></canvas>
    </div>
    <div class="chart-container">
        <canvas id="spiderChart3"></canvas>
    </div>
    <script>
        const data1 = {
            labels: <?php echo json_encode($labels1); ?>,
            datasets: [{
                label: 'Financial Metrics 1',
                data: <?php echo json_encode($data1); ?>,
                fill: true,
                backgroundColor: 'rgba(54, 162, 235, 0.2)',
                borderColor: 'rgb(54, 162, 235)',
                pointBackgroundColor: 'rgb(54, 162, 235)',
                pointBorderColor: '#fff',
                pointHoverBackgroundColor: '#fff',
                pointHoverBorderColor: 'rgb(54, 162, 235)'
            }]
        };

        const data2 = {
            labels: <?php echo json_encode($labels2); ?>,
            datasets: [{
                label: 'Financial Metrics 2',
                data: <?php echo json_encode($data2); ?>,
                fill: true,
                backgroundColor: 'rgba(255, 99, 132, 0.2)',
                borderColor: 'rgb(255, 99, 132)',
                pointBackgroundColor: 'rgb(255, 99, 132)',
                pointBorderColor: '#fff',
                pointHoverBackgroundColor: '#fff',
                pointHoverBorderColor: 'rgb(255, 99, 132)'
            }]
        };

        const data3 = {
            labels: <?php echo json_encode($labels3); ?>,
            datasets: [{
                label: 'Financial Metrics 3',
                data: <?php echo json_encode($data3); ?>,
                fill: true,
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                borderColor: 'rgb(75, 192, 192)',
                pointBackgroundColor: 'rgb(75, 192, 192)',
                pointBorderColor: '#fff',
                pointHoverBackgroundColor: '#fff',
                pointHoverBorderColor: 'rgb(75, 192, 192)'
            }]
        };

        const config1 = {
            type: 'radar',
            data: data1,
            options: {
                scales: {
                    r: {
                        angleLines: {
                            display: true
                        },
                        suggestedMin: -50,
                        suggestedMax: 50
                    }
                }
            }
        };

        const config2 = {
            type: 'radar',
            data: data2,
            options: {
                scales: {
                    r: {
                        angleLines: {
                            display: true
                        },
                        suggestedMin: -100,
                        suggestedMax: 100
                    }
                }
            }
        };

        const config3 = {
            type: 'radar',
            data: data3,
            options: {
                scales: {
                    r: {
                        angleLines: {
                            display: true
                        },
                        suggestedMin: -50,
                        suggestedMax: 50
                    }
                }
            }
        };

        const spiderChart1 = new Chart(
            document.getElementById('spiderChart1'),
            config1
        );

        const spiderChart2 = new Chart(
            document.getElementById('spiderChart2'),
            config2
        );

        const spiderChart3 = new Chart(
            document.getElementById('spiderChart3'),
            config3
        );
    </script>
</body>
</html>