DevExpress dxChart & dxDataGrid 활용 가이드(#2)

 

 

💡 DevExpress dxChart & dxDataGrid 활용 가이드

열심히 일하는 중.

 

이 블로그에서는 dxChart 및 dxDataGrid를 사용하는 방법에 대해 설명합니다. 각 질문별로 요점을 강조하고 예제를 포함하여 쉽게 이해할 수 있도록 구성하였습니다.

📊 dxChart 관련 질문 & 해결 방법

✅ 하나의 차트에서 Bar와 Line을 동시에 표시할 수 있나요?

가능합니다! dxChart에서는 여러 개의 시리즈를 활용할 수 있습니다.

$("#chartContainer").dxChart({
    dataSource: myData,
    series: [
        { type: "bar", valueField: "barValue", name: "Bar Chart" },
        { type: "line", valueField: "lineValue", name: "Line Chart" }
    ]
});
        

✅ 서로 다른 값의 범위를 가진 데이터를 동시에 표현하려면?

각 시리즈를 서로 다른 축(valueAxis)에 바인딩하면 됩니다.

$("#chartContainer").dxChart({
    dataSource: myData,
    series: [
        { type: "bar", valueField: "largeValue", name: "Large Data", axis: "largeAxis" },
        { type: "line", valueField: "smallValue", name: "Small Data", axis: "smallAxis" }
    ],
    valueAxis: [
        { name: "largeAxis", position: "left", min: 0, max: 100000 },
        { name: "smallAxis", position: "right", min: -100, max: 100 }
    ]
});
        

✅ 소수점 2자리까지 표시하려면?

label.format 속성을 설정하여 해결할 수 있습니다.

$("#chartContainer").dxChart({
    dataSource: myData,
    series: [
        {
            valueField: "sales",
            name: "Sales",
            label: {
                visible: true,
                format: {
                    type: "fixedPoint",
                    precision: 2
                }
            }
        }
    ]
});
        

📋 dxDataGrid 관련 질문 & 해결 방법

✅ 셀 값이 NaN으로 표시되는 경우, 공백으로 변경하는 방법?

`cellTemplate` 또는 `calculateCellValue`를 활용하여 NaN을 공백으로 변환할 수 있습니다.

$("#gridContainer").dxDataGrid({
    dataSource: myData,
    columns: [
        {
            dataField: "price",
            cellTemplate: function(container, options) {
                let value = options.value;
                container.text(isNaN(value) ? "" : value.toFixed(2));
            }
        }
    ]
});
        

✅ dxChart에서 X축 데이터의 표시 순서를 역정렬하려면?

`argumentAxis.inverted` 옵션을 활용하면 **X축 순서를 반대로 변경**할 수 있습니다.

$("#chartContainer").dxChart({
    dataSource: myData,
    argumentAxis: { inverted: true },
    series: [{ valueField: "value", argumentField: "category", type: "bar" }]
});
        

🎯 마무리

이 블로그에서는 dxChart 및 dxDataGrid의 핵심 기능을 정리했습니다. 더 많은 활용 방법을 알고 싶다면 DevExpress 공식 문서를 참고하세요!