AI 탐구노트

종목 별 주가 현황 표 만들기 본문

DIY 테스트

종목 별 주가 현황 표 만들기

42morrow 2024. 9. 19. 16:12

 

ChatGPT의 도움을 받아서 주식 현황을 표시해주는 표를 작성해 보고자 합니다.

 

요구사항은 다음과 같습니다. 

  1. 종목, 차트, 현재가, 변동, 거래량, 거래대금, 시가총액이 한 라인에 표시되어야 합니다. 
  2. 차트는 스파크라인 형태로 차트 셀 내에 표시되어야 합니다.
  3. 차트에서 주가 부분은 라인차트로, 거래량은 바차트로 하되 둘이 합쳐진 형태로 같은 타임라인 상에 표시되어야 합니다.
  4. 현황을 표시하기 위한 데이터는 외부에서 json 형태로 제공됨을 가정합니다.

 

 

데이터 형식

ChatGPT가 제가 제시한 이미지 형태에서 제안한 샘플 Json 데이터의 형식은 다음과 같습니다. 

# Sample JSON data
data = [
    {
        "name": "미래에셋증권",
        "current_price": 8800,
        "price_change": 100,
        "change_percent": 1.15,
        "trading_volume": [100, 150, 200, 170, 180],  # 거래량 데이터를 배열로 추가
        "trading_value": "3,942백만",
        "market_cap": "5조 2,328억",
        "price_chart": [8700, 8750, 8780, 8790, 8800]
    },
    ...
]

 

 

위 포맷은 주식의 종목 별 데이터를 담고 있는 리스트로 각 종목은 dictionary 형태로 구성됩니다. 

  • name: 종목명
  • current_price: 현재 주가
  • price_change: 가격 변동
  • change_percent: 변동률
  • trading_volume: 거래량 데이터 배열
  • trading_value: 거래 대금
  • market_cap: 시가 총액
  • price_chart: 주가 데이터를 나타내는 배열

 

 

2.코드 설명

ChatGPT가 생성해 준 코드는 다음과 같습니다. 향후에 활용할 때는 data와 공통 모듈들은 별도의 파일로 분리해서 사용해야겠죠.

그리고, 맨 마지막에 생성된 HTML 결과물을 서버 모듈 없이 웹 브라우저 상에서 바로 보도록 하기 위해 webbrowser 패키지를 사용했습니다. 

import json
import webbrowser
import os

# Sample JSON data
data = [
    {
        "name": "미래에셋증권",
        "current_price": 8800,
        "price_change": 100,
        "change_percent": 1.15,
        "trading_volume": [100, 150, 200, 170, 180],  # 거래량 데이터를 배열로 추가
        "trading_value": "3,942백만",
        "market_cap": "5조 2,328억",
        "price_chart": [8700, 8750, 8780, 8790, 8800]
    },
    {
        "name": "한화오션",
        "current_price": 31100,
        "price_change": 500,
        "change_percent": 1.63,
        "trading_volume": [80, 120, 100, 90, 110],
        "trading_value": "14,834백만",
        "market_cap": "9조 5,448억",
        "price_chart": [30000, 30500, 30800, 31000, 31100]
    },
    {
        "name": "삼성중공업",
        "current_price": 10430,
        "price_change": 90,
        "change_percent": 0.87,
        "trading_volume": [300, 250, 270, 260, 280],
        "trading_value": "2,512백만",
        "market_cap": "9조 1,960억",
        "price_chart": [10300, 10350, 10400, 10420, 10430]
    },
    # 더 많은 주식 데이터를 추가하세요...
]

def generate_html(data):
    # HTML Content
    html_content = '''
    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Stock Overview</title>
        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
        <style>
            table {
                width: 100%;
                border-collapse: collapse;
            }
            th, td {
                padding: 10px;
                text-align: left;
                border-bottom: 1px solid #ddd;
            }
            th {
                background-color: #f2f2f2;
            }
            .chart-container {
                position: relative;
                width: 150px; /* 고정된 차트 너비 */
                height: 80px; /* 고정된 차트 높이 */
            }
        </style>
    </head>
    <body>
        <h2>주식 현황</h2>
        <table>
            <thead>
                <tr>
                    <th>종목</th>
                    <th>차트</th>
                    <th>현재가</th>
                    <th>변동</th>
                    <th>거래량</th>
                    <th>거래대금</th>
                    <th>시가총액</th>
                </tr>
            </thead>
            <tbody>
    '''

    # Adding stock data rows
    for idx, stock in enumerate(data):
        chart_id = f"chart-{idx}"
        html_content += f'''
        <tr>
            <td>{stock['name']}</td>
            <td>
                <div class="chart-container">
                    <canvas id="{chart_id}"></canvas>
                </div>
            </td>
            <td>{stock['current_price']:,}원</td>
            <td>+{stock['price_change']:,}원 ({stock['change_percent']:.2f}%)</td>
            <td>{sum(stock['trading_volume']):,}</td>
            <td>{stock['trading_value']}</td>
            <td>{stock['market_cap']}</td>
        </tr>
        '''

    html_content += '''
            </tbody>
        </table>

        <script>
    '''
    
    # Adding JavaScript for Chart.js
    for idx, stock in enumerate(data):
        chart_id = f"chart-{idx}"
        html_content += f'''
        var ctx{idx} = document.getElementById('{chart_id}').getContext('2d');
        new Chart(ctx{idx}, {{
            type: 'bar',
            data: {{
                labels: {list(range(len(stock['price_chart'])))} ,
                datasets: [
                    {{
                        type: 'line',
                        label: '주가',
                        data: {stock['price_chart']},
                        borderColor: 'rgba(255, 99, 132, 1)',
                        backgroundColor: 'rgba(255, 99, 132, 0.2)',
                        borderWidth: 2,
                        fill: false,
                        tension: 0.1,
                        yAxisID: 'y-axis-1'
                    }},
                    {{
                        type: 'bar',
                        label: '거래량',
                        data: {stock['trading_volume']},
                        backgroundColor: 'rgba(54, 162, 235, 0.5)',
                        yAxisID: 'y-axis-2'
                    }}
                ]
            }},
            options: {{
                maintainAspectRatio: false, // 차트의 크기를 고정
                scales: {{
                    x: {{
                        display: false
                    }},
                    'y-axis-1': {{
                        type: 'linear',
                        position: 'left',
                        beginAtZero: false
                    }},
                    'y-axis-2': {{
                        type: 'linear',
                        position: 'right',
                        beginAtZero: true,
                        grid: {{
                            drawOnChartArea: false
                        }}
                    }}
                }},
                plugins: {{
                    legend: {{
                        display: false
                    }}
                }}
            }}
        }});
        '''

    html_content += '''
        </script>
    </body>
    </html>
    '''

    return html_content

# Generate HTML file
html_file = 'stock_overview.html'
with open(html_file, 'w', encoding='utf-8') as f:
    f.write(generate_html(data))

# Open the HTML file in the default web browser
webbrowser.open('file://' + os.path.realpath(html_file))

 

 

3.생성 결과물

 

ChatGPT와의 대화에서 몇 번의 시행착오를 거쳐 나온 결과물은 다음과 같습니다. 

시행착오는 Matplot -> Javascript 기반 차트 컴포넌트 이용, Sparkline 차트 생성, 크기 조정, 주가와 거래량 차트의 합침 등에 대한 것이었습니다. 그래도 나온 형태를 보니 예상보다는 잘 나온 것 같아 ChatGPT에게는 '잘했어요'를 주었습니다. 

 

 

 

이제 또 다른 걸 해 봐야겠군요.

'DIY 테스트' 카테고리의 다른 글

[주식] KRX 300 맵 만들어보기  (10) 2024.09.22
주가 정보 가져오기  (4) 2024.09.21
PyKrx 패키지 제공 함수 테스트  (2) 2024.09.21
SAM2 (Segment Anything 2) 돌려 보기  (0) 2024.09.20
ChatGPT를 이용해 퀴즈 프로그램 만들기  (3) 2024.09.03
'DIY 테스트' Related Articles more