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

오늘은 데이터 시각화에서 모듈을 사용했지만 모듈 자체 내장함수에서 일별로 데이터 뽑는것이 없길래 직접 짜서 만들었따! Ajax를 이용해서 api 연동하여 데이터를 쫙 뿌려줬다 생각보다 오래 걸렸지만 재밌었다!!!

 

개발스크립트 [JS]

var ctx = document.getElementById('myChart');
var config = {
    type: 'horizontalBar',
    data: {
        datasets: [{
            data: {{ pay_list|safe }},
            backgroundColor: [
                'rgba(34, 222, 235, 0.2)',
                'rgba(25, 206, 6, 0.2)',
                'rgba(75, 92, 192, 0.2)',
                'rgba(13, 102, 255, 0.2)',
                'rgba(255, 15, 64, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(55, 106, 46, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(25, 159, 64, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
            ],
        }],
        labels: {{ mall_list|safe }},
    },
    options: {
        title: {
            display: true,
            text: '결제금액 현황'
        },
        responsive: true,
        legend: {
            display: false,
        },
        scales: {
            xAxes: [
                {
                    scaleLabel: {
                        display: true,
                    },
                },
            ],
        },
    }
}
var myChart = new Chart(ctx, config)
$('#searchDate').on("change", function () {
        var input_date = $(this).val()
        $.ajax({
            url: "{% url 'B2C:etctest' %}",
            dataType: 'json',
            type: 'GET',
            data: {"input_date": input_date},
            success: function (result) {
                myChart.config.data.datasets[0].data = result['y']
                myChart.config.data.datasets[0].lable = result['x']
                myChart.data.labels = result['x']
                myChart.update()
            }
        })
    }
)

개발스크립트[API]

class etc(APIView):
    def get(self, request):
        order_list = Order_list.objects.all()
        date = request.GET.get('input_date')
        start = f'{date} 00:00:00'
        end = f'{date} 23:59:59'

        testlist = {}
        for i in order_list.filter(ORDER_DATE__range=[start, end]):
            if i.MALL_ID not in testlist:
                testlist[i.MALL_ID] = 0
            testlist[i.MALL_ID] += i.PAY_COST

        x = list(testlist.keys())
        y = list(testlist.values())
        result = {'x': x, 'y': y}

        return JsonResponse(result)