Web Components 列スパークライン

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

    Web Components 列スパークラインの例

    コード スニペット

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

    <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;
        }
    }