angular - 类型“SeriesOrganizationDataLabelsOptionsObject []”上不存在获取错误属性“nodeFormatter”

Question

我正在尝试以角度实现 HighCharts。这是组织图表。但我收到了类似的错误

Property 'nodeFormatter' does not exist on type 'SeriesOrganizationDataLabelsOptionsObject[]'

.ts 文件

export class OrganisationComponent implements OnInit {
  chartRef: any;

  public options: any = {
    chart: {
      height: 300,
      inverted: true
    },
    title: {
      useHTML: true,
      text: "Org Chart"
    },
    series: [
      {
        type: "organization",
        name: "Highsoft",
        linkColor: '#ccc',
        linkLineWidth: "2",
        keys: ["from", "to"],
        cursor: "pointer",
        colorByPoint: false,
        color: "#b3e6ff",
        data: [
         { from: 'TM',to: 'D1'},
         { from: 'TM',to: 'D2'},
         { from: 'TM',to: 'D3'},
        ],
        levels: [
          {level: 0},{level: 1},{level: 2}
        ],
        dataLabels: {
            color: 'white',
            nodeFormatter: function () {
                // Call the default renderer
                var html = Highcharts.defaultOptions
                    .plotOptions
                    .organization
                    .dataLabels
                    .nodeFormatter
                    .call(this);

                // Do some modification
                html = html.replace(
                    '<h4 style="',
                    '<h4 style="font-style: italic;'
                );
                return html;
            }
        },
        nodes: [
          {
            id: "TM",
            icon: "account_circle",
            name: "Team Lead",
            info: " TM info",
            events: {
              click: event => {
                this.changeLinkColor(event.point.level, event);
              }
            },
            },
          {
            id: "D1",
            icon: "account_circle",
            name: "Developer 1",
            info: " D1 info",
            events: {
              click: event => {
                this.changeLinkColor(event.point.level, event);
              }
            }
            
          },
          {
            id: "D2",
            icon: "account_circle",
            name: "Developer 2",
            info: " D2 info",
            events: {
              click: event => {
                this.changeLinkColor(event.point.level, event);
              }
            }
          },
          {
            id: "D3",
            icon: "account_circle",
            name: "Developer 3",
            info: " D3 info",
            events: {
              click: event => {
                this.changeLinkColor(event.point.level, event);
              }
            }
          },
        ],
      }
    ],
    tooltip: {
      enabled: false,
    }
  };

  ngOnInit() {
    this.drawChart();
  }

  changeLinkColor(level, event) {
    // Reset all dataLables
    this.resetAllActiveClasses()

    // Apply link color
    this.options.series[0].levels.forEach(levelRow => {
      if (levelRow.level === level) {
        levelRow.linkColor = "#007ad0";
      } else {
        levelRow.linkColor = "#666666";
      }
    });
    // Apply css class
    this.setActiveClass(event.point.id, event.point.linksFrom, true)
    this.chartRef.update(this.options)
  }

  setActiveClass(id, childsNodes, isParent = false){
    const className = isParent === true ? 'parent-active' : 'child-active' 
    this.options.series[0].nodes.forEach(
      (node) =>{
        if(node.id === id) {
          node.dataLabels = {
              className:className
          }
        }
      }
    )
    if(childsNodes.length>0){
        childsNodes.forEach(
          (childNode) =>{
            if(childNode.toNode.linksFrom.length>0){
              console.log(childNode.to, " has child")
                this.setActiveClass(childNode.to, childNode.toNode.linksFrom)
            } else {
              this.setActiveClass(childNode.to, [])
            }
            
          }
        )
    }
  }

  resetAllActiveClasses(){
    this.options.series[0].nodes.forEach(
      (node) =>{
        node.dataLabels = {
              className:''
        }
      }
    )
  }

  drawChart() {
    this.chartRef = Highcharts.chart("container", this.options);
  }
}

由于此功能在文档本身中给出

工作链接 https://stackblitz.com/edit/angular-bar-highcharts-bnom1n

文档链接

https://api.highcharts.com/highcharts/series.organization.dataLabels.nodeFormatter

标签： angularhighcharts

Answer 1

dataLabels 是一个数组，您将其视为一个对象：

var html = Highcharts.defaultOptions .plotOptions .organization .dataLabels .nodeFormatter .call(this);

应该是这样的：

var html = Highcharts.defaultOptions .plotOptions .organization .dataLabels[0] .nodeFormatter .call(this);

Ps抱歉格式化-在移动设备上