Amchart 데이터베이스 연동 + Ajax

 

// 전역변수 선언
    var chart;
    var xAxis, series;

    // 첫 그래프 그림
    am5.ready(function () {

        var dataList = [[${cJsonArr}]];
        console.log(dataList);


        var root = am5.Root.new("ChartDiv");


        root.setThemes([
            am5themes_Animated.new(root)
        ]);


        chart = root.container.children.push(am5xy.XYChart.new(root, {
            panX: true,
            panY: true,
            wheelX: "panX",
            wheelY: "zoomX",
            pinchZoomX: true
        }));


        var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {}));
        cursor.lineY.set("visible", false);


        var xRenderer = am5xy.AxisRendererX.new(root, {minGridDistance: 30});
        xRenderer.labels.template.setAll({
            rotation: -90,
            centerY: am5.p50,
            centerX: am5.p100,
            paddingRight: 15
        });

        xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
            maxDeviation: 0.3,
            categoryField: "objNm",
            renderer: xRenderer,
            tooltip: am5.Tooltip.new(root, {})
        }));

        yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
            maxDeviation: 0.3,
            renderer: am5xy.AxisRendererY.new(root, {})
        }));


        series = chart.series.push(am5xy.ColumnSeries.new(root, {
            name: "Series 1",
            xAxis: xAxis,
            yAxis: yAxis,
            valueYField: "value",
            sequencedInterpolation: true,
            categoryXField: "objNm",
            tooltip: am5.Tooltip.new(root, {
                labelText: "{valueY}"
            })
        }));

        series.columns.template.setAll({cornerRadiusTL: 5, cornerRadiusTR: 5});
        series.columns.template.adapters.add("fill", function (fill, target) {
            return chart.get("colors").getIndex(series.columns.indexOf(target));
        });

        series.columns.template.adapters.add("stroke", function (stroke, target) {
            return chart.get("colors").getIndex(series.columns.indexOf(target));
        });

        xAxis.data.setAll(dataList);
        series.data.setAll(dataList);


        series.appear(1000);
        chart.appear(1000, 100);

    });

    $('#selectOption').change(function () {
        var optionValue = $("#selectOption option:selected").val();
        console.log("select 박스 변경 성공");

        $.ajax({
            url: '/ajax/option',
            type: 'POST',
            data: {'optionValue': optionValue},
            dataType: 'json',
            success: function (data) {
                const JsonData = data;
                console.log("JsonData : " + JsonData);

                // var dataList = [];
                // for (var i = 0; i < JsonData.length; i++) {
                //     var data = {};
                //     data.country = JsonData[i]['objNm'];
                //     data.value = JsonData[i]['value'];
                //     dataList.push(data);
                // }
                // console.log("dataList : " + dataList);

                xAxis.data.setAll(JsonData);
                series.data.setAll(JsonData);
            }
        })

    });