[!Note] このコントロールは非推奨であり、Grid に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。
Blazor 列スパークライン
Ignite UI for Blazor Data Table / Data Grid は、Ignite UI for Blazor スパークライン コンポーネントなど、他のコンポーネントを埋め込むことができるテンプレート列をサポートします。IgbGrid
コンポーネントにサポートされる他の列タイプについては、列タイプ トピックを参照してください。
Blazor 列スパークラインの例
コード スニペット
以下のコード例は、IgbGrid
コンポーネントの IgbTemplateColumn
に IgbSparkline
を埋め込む方法を示します。
<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>