首页 > 解决方案 > 为什么第 2 级的父母链接到相同的子节点,或者他们的孩子在组织 Highcharts 中不同

问题描述

我正在使用组织 Highcharts,其中 2 级的父母链接到同一个孩子。正如您在图片中看到的那样,Nurrettin 和 Mohammad Sabir 节点链接到所有相同的子节点。然而,Nurretin 是 Cemil Ceylan & Mustafa 的父节点,而 M.Sabir 是其余 7 个子节点的父节点。但问题是为什么 Nurretin 节点与所有节点相连?

有人可以回答吗?

组织高图

在此处输入图像描述

代码在这里

renderSubordinates=(data)=>{
    console.log('data',data)
   var array2D =[];
   var arraySeries2D =[];
   var arr = [];
   var levelObj;
   var arrSeries = [];

   const rec = (val) => {
    let name = val.from;
    for(let j=0;j<val.to.length;j++){
        let nameChild = val.to[j].from;
        array2D.push([name,nameChild])
    }
    return [...array2D]
    }
    const createHC = (data) => {
    arr.push(rec(data));
    if(data.to.length){
    data.to.map(x=>{
     arr.push(rec(x));
    createHC(x);
    })
    }
    }
    var data1 = data[0];
    createHC(data1);
    console.log('arr',arr.pop())
    var dataArr = arr.pop()
    var levelInd = arr;
    var levelArr =levelInd.map((x,index)=>{
    // console.log('index',index);
    levelObj={
        level: index,
        color: {
            linearGradient: { x1: 0, x2: 1, y1: 0, y2: 1 },
            stops: [
                [0, "#0376b0"],
                [1, "#b4e5fe"],
            ],
        },
        
        dataLabels: {
          color: 'white',
          style:{
              fontSize:'10px'
          }
    }}
    return levelObj
})
   const seriesRec = (val) => {
    let obj = {id:val.name,title:val.title,name:val.name,image:val.image,
        dataLabels: {
          enabled: true,
          style: {
            fontSize: '10px'
          }
        }};
    arraySeries2D.push(obj)
    
    return [...arraySeries2D]
    }
    const seriesHC = (data) => {
    arrSeries.push(seriesRec(data));
    if(data.to.length){
    data.to.map(x=>{
    arrSeries.push(seriesRec(x));
    seriesHC(x);
    })
    }
    }
    
    var data1 = data[0];
    seriesHC(data1);
    var dataSeriesArr = arrSeries.pop()

    let obj: Highcharts.Options = {
      chart: {
        height: 1200,
        inverted: true
      },
    
      title: {
        text: ''

      },
    
      series: [{
        type: 'organization',
        name: '',
        keys: ['from', 'to'],
        
        data: dataArr,
        
        levels: levelArr,
        nodes:dataSeriesArr,
        colorByPoint: false,
        color: '#007ad0',
        
        dataLabels: {
          color: 'white'
        },
        borderColor: '',
        borderRadius:20,
        nodeWidth: 120,
        className:'node-class'
      }],
      tooltip: {
        outside: true
      },
      plotOptions: {
        organization: {
          linkColor: 'gray',
          linkLineWidth:2,
        }
      },
      exporting: {
        allowHTML: true,
        sourceWidth: 800,
        sourceHeight: 600
      }
    };
  return obj
}

标签: javascriptangulartypescripthighchartsangular-highcharts

解决方案


推荐阅读