[Day28] 2022-03-07(화) Web Application 8 - Chart - 이진만 강사님

[1] Chart template 활용

  1. 차트 template 사이트

    - https://www.highcharts.com/

Interactive javascript charts library

  2. Demos -> Highcharts JS Demos

  3. 원하는 차트 클릭

  4. EDIT IN JSFIDDLE 클릭

  5. HTML

HTML에 붙여 넣을 코드

    - script 태그 모두 복사하여 로드할 페이지에 붙여넣기

home.html 에 붙여넣기

    - id="container"인 div 태그 생성

출력될 곳에 div 태그 넣기

  6. CSS

    - 전부 복사해서 style 태그에 붙여넣거나 별도의 CSS 파일에 붙여넣기

    - chart 부분이 아닌, data table 출력과 관련된 CSS

  7. JavaScript

    - 전부 복사해서 script 태그에 붙여넣거나 별도의 JS 파일에 붙여넣기

    - script 태그 내 $(document).ready(function( ){ }); 의 함수 부분에 붙여넣음

  8. 출력 확인

 

[2] Ajax 활용하여 Chart data 불러오기

  1. script 내의 series 부분을 별도로 불러온다고 가정

  2. script 내 함수 정의하고, series 객체를 별도의 data로 빼고 chart 출력 확인

    function display(data){
        Highcharts.chart('container', {
            chart: {
                type: 'line'
            },
            title: {
                text: 'Monthly Average Temperature'
            },
            subtitle: {
                text: 'Source: WorldClimate.com'
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
                title: {
                    text: 'Temperature (°C)'
                }
            },
            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: true
                    },
                    enableMouseTracking: false
                }
            },
            series: data
        });
    }

    function getData(){
        data = [{
                    name: 'Tokyo',
                    data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
                }, {
                    name: 'London',
                    data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
                }];
        display(data);
    }

    $(document).ready(function(){
        getData();
    });

  3. getData( ) 함수에서 ajax 활용

    function getData(){
        $.ajax({
            url: 'chart1impl',
            success: function(){
                display(data);
            }
        });

  4. views.py 에 Chart1impl 함수 정의 및 data 가져오기

    @request_mapping("/chart1impl", method="get")
    def chart1impl(self, request):
        data = []
        content1 = {}
        content2 = {}

        content1["name"] = "Tokyo"
        content1["data"] = [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        content2["name"] = "London"
        content2["data"] = [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]

        data.append(content1)
        data.append(content2)
        return HttpResponse(json.dumps(data), content_type='application/json')

  5. 동일하게 출력되는지 확인

- 끝 -