[!Note] このコントロールは非推奨であり、Grid に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。
Web Components 列スパークライン
Ignite UI for Web Components Data Table / Data Grid は、Ignite UI for Web Components スパークライン コンポーネントなど、他のコンポーネントを埋め込むことができるテンプレート列をサポートします。IgcGridComponent
コンポーネントにサポートされる他の列タイプについては、列タイプ トピックを参照してください。
Web Components 列スパークラインの例
コード スニペット
以下のコード例は、IgcGridComponent
コンポーネントの IgcTemplateColumn
に IgcSparklineComponent
を埋め込む方法を示します。
<igc-data-grid id="grid"
height="100%"
width="100%"
row-height="70"
auto-generate-columns="false">
<!-- ... -->
<igc-template-column id="historyColumn"
field="OrderHistory" header-text="Order History" horizontal-alignment="center" width="*>150"></igc-template-column>
<!-- ... -->
</igc-data-grid>
import { IgcDataGridModule } from 'igniteui-webcomponents-grids';
import { IgcDataGridComponent } from 'igniteui-webcomponents-grids';
import { IgcTemplateColumnComponent } from 'igniteui-webcomponents-grids';
import { IgcTemplateCellInfo } from 'igniteui-webcomponents-grids';
import { IgcTemplateCellUpdatingEventArgs } from 'igniteui-webcomponents-grids';
import { IgcSparklineModule } from 'igniteui-webcomponents-charts';
import { IgcSparklineComponent } from 'igniteui-webcomponents-charts';
// registering Grid and Sparkline chart's modules:
ModuleManager.register(IgcDataGridModule);
ModuleManager.register(IgcSparklineModule);
constructor() {
this.grid = document.getElementById("grid") as IgcDataGridComponent;
this.grid.dataSource = Products.getData();
this.onUpdatingHistoryColumn = this.onUpdatingHistoryColumn.bind(this);
const historyColumn = document.getElementById("historyColumn") as IgcTemplateColumnComponent;
historyColumn.cellUpdating = this.onUpdatingHistoryColumn;
}
public onUpdatingHistoryColumn(s: IgcTemplateColumnComponent, e: IgcTemplateCellUpdatingEventArgs) {
const content = e.content as HTMLDivElement;
let chart: IgcSparklineComponent | null = null;
let info = e.cellInfo as IgcTemplateCellInfo;
if (content.childElementCount === 0) {
chart = new IgcSparklineComponent();
chart.valueMemberPath = "Sold";
chart.labelMemberPath = "Week";
chart.displayType = SparklineDisplayType.Line;
chart.lineThickness = 2;
chart.brush = "rgb(21, 190, 6)";
chart.negativeBrush = "rgb(211, 17, 3)";
chart.width = "100%";
chart.height = "100%";
content.style.width = "calc(100% - 10px)";
content.style.height = "calc(100% - 10px)";
content.style.padding = "5px";
content.style.margin = "0px";
content.style.display = "inline-grid";
content.appendChild(chart);
}
else {
chart = content.children[0] as IgcSparklineComponent;
}
if (chart) {
chart.dataSource = info.rowItem.OrderHistory;
}
}