[Blazor] Telerik 차트 - Axis(축)에 소수점 없애기

Telerik Blazor에서 Chart를 만들었다.

ChartValueAxis 속성은 default 값을 사용했더니, Axis값이 소수점으로 나왔다.

하지만 내 Chart의 의미는 count이기 때문에 소수가 나올 수 없다.

 

기존 코드는 다음과 같다.

<TelerikChart OnSeriesClick="@SeriesClickHandler">
    <ChartTitle Text="Monitoring Dashboard" />
    <ChartLegend Position="ChartLegendPosition.Bottom" />
    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Column"
                        Name="DCN Cnt."
                        Data="@DcnWeekCount"
                        Field="@nameof(DateDcn.Cnt)"
                        Color="#FFD246"
                        CategoryField="@nameof(DateDcn.Week_No)" >
            <ChartSeriesTooltip Visible="true">
                        <Template>
                            @{
                                var CurrItem = context.DataItem as DateDcn;
                                List<W_DCN> dcns = CurrItem.Dcn.OrderBy(f => f.DCN_NO).ToList();
                            }
                            <div>
                                <strong>&lt; DCN NO &gt;</strong><br />
                                @foreach (var dcn in dcns)
                                {
                                    <a style="text-align:center;">@dcn.DCN_NO</a>
                                    <br />
                                }
                            </div>
                        </Template>
                    </ChartSeriesTooltip>
        </ChartSeries>
    </ChartSeriesItems>

    <ChartValueAxes>
        @*<ChartValueAxis MajorUnit="1">*@
        <ChartValueAxis>
            <ChartValueAxisTitle Text="Count" />
        </ChartValueAxis>
    </ChartValueAxes>
</TelerikChart>

 

여기서 ChartValueAxis의 MajorUnit 속성을 추가해주었다.

Telerik 홈페이지의 reference를 참고하자면 MajorUnit 속성은 The interval between major divisions. If the valueAxis.type is set to "log", the majorUnit value will be used for the base of the logarithm.이라고 한다.

즉, 구분 사이의 간격이다.

나는 정수의 축을 만들 것이기 때문에 MajorUnit=1로 설정해주었다.

<ChartValueAxes>
    <ChartValueAxis MajorUnit="1">
        <ChartValueAxisTitle Text="Count" />
    </ChartValueAxis>
</ChartValueAxes>

 

 

최종코드와 화면은 다음과 같다.

<TelerikChart OnSeriesClick="@SeriesClickHandler">
    <ChartTitle Text="Monitoring Dashboard" />
    <ChartLegend Position="ChartLegendPosition.Bottom" />
    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Column"
                        Name="DCN Cnt."
                        Data="@DcnWeekCount"
                        Field="@nameof(DateDcn.Cnt)"
                        Color="#FFD246"
                        CategoryField="@nameof(DateDcn.Week_No)" >
            <ChartSeriesTooltip Visible="true">
                        <Template>
                            @{
                                var CurrItem = context.DataItem as DateDcn;
                                List<W_DCN> dcns = CurrItem.Dcn.OrderBy(f => f.DCN_NO).ToList();
                            }
                            <div>
                                <strong>&lt; DCN NO &gt;</strong><br />
                                @foreach (var dcn in dcns)
                                {
                                    <a style="text-align:center;">@dcn.DCN_NO</a>
                                    <br />
                                }
                            </div>
                        </Template>
                    </ChartSeriesTooltip>
        </ChartSeries>
    </ChartSeriesItems>

    <ChartValueAxes>
        <ChartValueAxis MajorUnit="1">
            <ChartValueAxisTitle Text="Count" />
        </ChartValueAxis>
    </ChartValueAxes>
</TelerikChart>