[!Note] このコントロールは非推奨であり、Grid に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。

    Blazor 列スパークライン

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

    Blazor 列スパークラインの例

    コード スニペット

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

    <IgbDataGrid Height="100%" Width="100%"
              RowHeight="90"
              AutoGenerateColumns="false"
              DataSource="DataSource">
        <IgbTemplateColumn 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>
        </IgbTemplateColumn>
    </IgbDataGrid>
    

    API リファレンス