Blazor 列スパークライン

Ignite UI for Blazor Data Table / Data Grid は、Ignite UI for Blazor スパークライン コンポーネントなど、他のコンポーネントを埋め込むことができるテンプレート列をサポートします。DataGrid コンポーネントにサポートされる他の列タイプについては、列タイプ トピックを参照してください。

Blazor 列スパークラインの例

コード スニペット

以下のコード例は、DataGrid コンポーネントの TemplateColumnSparkline を埋め込む方法を示します。

<DataGrid Height="100%" Width="100%"
          RowHeight="90"
          AutoGenerateColumns="false"
          DataSource="DataSource">    
    <TemplateColumn Field="OrderHistory" Width="@("*>180")" HeaderText="Order History" >                     
        <Template>
            <RenderFragment>
                 <div style="width: 100%; height: 70px; background: transparent">
                     <Sparkline Height="100%" Width="100%"
                                DataSource="@((context.RowItem as Product).OrderHistory)"
                                DisplayType="SparklineDisplayType.Line"
                                ValueMemberPath="Sold"
                                LabelMemberPath="Week"
                                Brush="rgb(21, 190, 6)">
                     </Sparkline>
                 </div>
            </RenderFragment>
        </Template>
    </TemplateColumn>
</DataGrid>