💡 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 공식 문서를 참고하세요!
