2022-05-04 개발일기 [Django, Chart.js]

오늘은 통계탭에 금일 매출표시를 위해 Django template 과 Chart.js를 이용하여 한눈에 보기 쉽게 차트를 뿌렸다 ! 물론 이거말고 UI/UX 및 인터페이스 등 여러가지 메뉴에 있는 수정사항을 거쳤지만 구글링시 Django와 Chart.js 연동하여 데이터 처리하는 내용이 잘 없길래 스크립트 내용을 올리고자 한다! 막상 말로만 들으면 어렵지만 매우 쉽다. view단에서 Django DB 를 불러와 데이터 가공을하여 context사용해 template쪽으로 return 해준다음 Django template을 사용하여 Chart.js 내장함수임 data 와 labels에 각각 넣어주기만 하면 끝이다! 

 

 

5월 중순까지 프로젝트 끝내야하는데 더 열심히해서 폐가 안되도록 파이팅하자!

 

개발소스 [script]

var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
    type: 'horizontalBar',

    data: {
        datasets: [{
            data: {{ pay_list|safe }},
            backgroundColor: [
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)',
            ],
            lable: 'Label',
        }],
        labels:{{ mall_list|safe }},
    },
    options: {
        title: {
            display: true,
            text: '결제금액 현황 그래프'
        },
        responsive: false,
        legend: {
            display: false,
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        },

    }
});

개발소스 [view단]

def main(request):
    today0 = datetime.now().date()
    today = datetime.today()
    order_list = Order_list.objects.all()


    datelist = []
    for i in range(len(datelist)):
        datelist[i] = str(datelist[i])
    c = list(datelist)

    date_list = []
    for i in c:
        date_list.append(i[:10])

    testlist = {}

    for i in order_list:
        if i.MALL_ID not in testlist:
            testlist[i.MALL_ID] = 0
        testlist[i.MALL_ID] += i.PAY_COST

    mall = testlist.keys()
    pay = testlist.values()

    mall_list = list(mall)
    pay_list = list(pay)



    context = {
        'today0': today0,
        # 'cost': cost,
        'order_list': Order_list.objects.all(),
        'mall_list': mall_list,
        'pay_list': pay_list,
        'date': date_list,
    }

    return render(request, 'B2C/index.html', context)