[Kendo UI] Kendo Chart Parameter

프로젝트에서 사용하였던 KendoUI - Chart Function을 정리해둔다.

 

function chartInit(type, serise) {
	//시리즈가 정의되어있지 않으면 새로 생성해준다.
    if (!serise) {
        serise = [{
            field: "field1",
            name: "field1",
            categoryField: "PLANTSHORTNAME",
            color: "#5575ee",
            missingValues: "gap",
            labels: {
                visible: true,
                color: "#5575ee",
            }

        }, {
            field: "field2",
            name: "field2",
            categoryField: "PLANTSHORTNAME",
            color: "#e86c9e",
            missingValues: "gap",
            labels: {
                visible: true,
                color: "#e86c9e",
            },
        }];
    }
    var date = new Date();
    var parameter = {
        DATE: String(date.getFullYear()) + '-' + String((pad(date.getMonth() + 1, 2)))
    };
    var majorUnit = 5; //범례 간격
	
	//조회타입이 연간인지, 월간인지에따라 파라미터 변경해준다.
    if (type) {
        switch (type) {
            case "SUM":
                parameter.DATE = spreadYearChart.tool().getValue();
                majorUnit = 5;
                break;
            case "MON":
                parameter.DATE = spreadYearChart.tool().getValue() + '-' + pad(spreadMonthChart.tool().getValue(), 2);
                majorUnit = 2;
                break;
        }

    } else {
        parameter.DATE = spreadYearChart.tool().getValue();
    }
    var chartPane = $('<div class="chartEmpty" style="position:relative;height:100%"></div>');
    var chartArea = $this.findName('sumChart');
    $(chartArea.item()).append(chartPane);
    $ux.data.query({
        id: '쿼리ID',
        version: '쿼리Version',
        parameter: parameter,
        reply: function(e) {
            var chartData = e.result;
            var chartEmpty = $('.chartEmpty');
            $(chartEmpty[0]).kendoChart({
                dataSource: {
                    data: chartData
                },
                title: {},
                legend: {
                    position: "top",
                    spacing: 30,
                    offsetX: 350,

                    visible: false,
                    labels: {
                        color: "#4d4f5c"
                    },
                    item: {
                        visual: function(e) {
                            var color = e.options.markers.background;
                            var labelColor = e.options.labels.color;
                            var defaultVisual = e.createVisual();
                            var defaultSize = defaultVisual.bbox().size;
                            var rect = new kendo.geometry.Rect([0, 0], [defaultSize.width + 30, defaultSize.height]);

                            var layout = new kendo.drawing.Layout(rect, {
                                spacing: 5,
                                alignItems: "right"
                            });
                            var cbSymbol = e.active ? "☑" : "☐";
                            var cb = new kendo.drawing.Text(cbSymbol, [0, 0], {
                                fill: {
                                    color: "#3b86ff"
                                },
                                font: "25px CJONLYONENEWbodyRegular",

                            });


                            // Reflow them together
                            layout.append(cb, defaultVisual);
                            layout.reflow();

                            return layout;
                        }
                    },
                },
                //renderAs: "canvas",
                seriesDefaults: {
                    type: "column",
                    labels: {
                        visible: true,
                        background: "transparent"
                    },
                    border: {
                        width: 0,
                        radius: 4

                    },
                    overlay: {
                        gradient: "none"
                    }


                },
                series: serise,
                valueAxis: {
                    //max: 25,
                    majorGridLines: {
                        visible: true
                    },
                    majorUnit: majorUnit,
                    labels: {
                        visible: true,
                        color: "#9a9a9a"
                    },
                    visible: true,
                    line: {
                        color: 'transparent'
                    }
                },
                categoryAxis: {
                    majorGridLines: {
                        visible: false
                    },
                    line: {
                        visible: false
                    },
                    labels: {
                        visible: true,
                    }
                }

            });
          
        }
    });
  
}

 

https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart

Configuration, methods and events of Kendo UI DataViz Chart | Kendo UI for jQuery