blazor - 파이차트나타내기

telerik blazor 파이차트를 나타내고싶다 

 

<TelerikChart>
    <ChartTitle Text="Break-up of Spain Electricity Production for 2008"></ChartTitle>
    <ChartLegend Position="ChartLegendPosition.Bottom"></ChartLegend>

    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Pie"
                     Data="@Data"
                     Field="@nameof(ModelData.Percentage)"
                     CategoryField="@nameof(ModelData.Source)"
                     ExplodeField="@nameof(ModelData.Explode)">
            <ChartSeriesTooltip Visible="true" Context="item">
                <Template>
                    @item.Percentage.ToString("P")
                </Template>
            </ChartSeriesTooltip>
            <ChartSeriesLabels Visible="true"></ChartSeriesLabels>
        </ChartSeries>
    </ChartSeriesItems> 
</TelerikChart>

 

숫자값을 퍼센티지로 나타내려면 

item.Percentage가 0.75라면, ToString("P") 사용시 75.00%로 변환됨

 

코드 Data속성에는 시리즈에 표시될 실제 데이터 전달

ModelData클래스의 인스턴스들의 컬렉션으로 구성되어야함

 

CategoryField : 각 항목 범주지정

ExplodeField : 특정항목 투과시킬지 여부 ( 투과? 안나타낸단건가)

ChartSeriesLabels : 차트시리즈 라벨 라벨 표시여부 

 

ModelData 클래스의 인스턴스 컬렉션이란?

여러개의 modeldata객체가 모여있는 컬렉션 (배열,리스트등의 형식일수있음)

이 컬렉션 통해 여러 데이터 포인트 나타내고 이 데이터 포인트 들은 차트에서 시리즈로 표시됨