angular - 如何在 Ignite UI 角度树图中更改分支级别节点的颜色？

Question

我已经使用下面的链接实现了树形图，效果很好。但是我想根据父 ID 更改分支节点的颜色。

https://www.infragistics.com/products/ignite-ui-angular/angular/components/treemap-overview.html

https://stackblitz.com/angular/gxolroyrbgb

上例中的每个大陆都应该有不同的颜色。

Answer 1

您可以使用该nodeStyling事件：

   <igx-treemap
            #treeMap
            height="100%"
            width="100%"
            parentIdMemberPath="parent"
            idMemberPath="id"
            labelMemberPath="name"
            valueMemberPath="pop"
            transitionDuration="500"
            (nodeStyling)="nodeStyling($event)"
            rootTitle="Countries">
   </igx-treemap>

使用事件处理程序：

public nodeStyling(ev: { sender: IgxTreemapComponent, args: IgxTreemapNodeStylingEventArgs }): void {
      if (this._map == null) {
        //Colors from www.ColorBrewer.org by Cynthia A. Brewer, Geography, Pennsylvania State University
        this._map = new Map<string, string>();
        this._map.set("Asia", "rgba(179, 88, 6, 1)");
        this._map.set("North_America", "rgba(224, 130, 20, 1)");
        this._map.set("Middle_East__North_Africa__and_Greater_Arabia", "rgba(253, 184, 99, 1)");
        this._map.set("Europe", "rgba(254, 224, 182, 1)");
        this._map.set("Central_America_and_the_Caribbean", "rgba(216, 218, 235, 1)");
        this._map.set("South_America", "rgba(178, 171, 210, 1)");
        this._map.set("Africa", "rgba(128, 115, 172, 1)");
        this._map.set("Australia_and_Oceania", "rgba(84, 39, 136, 1)");
      }
      var parent = ev.args.item.parent || ev.args.item.id;

      if (this._map.has(parent)) {
        if (ev.args.style) {

          ev.args.style.fill = this._map.get(parent);
        }
      }
    }

如此处所示：https ://stackblitz.com/edit/angular-d4fvgb

请注意，在此版本的产品中，您需要导入另一个模块才能使用此事件，但将来不需要这样做：

imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
        IgxTreemapModule,
    IgxTreemapNodeStyleDynamicModule,
        IgxButtonModule
  ],

希望这可以帮助！