javascript - 为什么第 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
}
解决方案
推荐阅读
- php - 富文本编辑器不将某些输入从 TextArea 保存到 MySQL
- excel - 如何使用 POI 4.0.1 Java 在条形图中添加垂直线
- javascript - 为什么我的数组中的项目没有显示在单独的行上?
- haskell - Haskell foldl 和 foldl1 产生“没有由文字引起的 (Num [Char]) 的实例”
- android - Function unresolved reference in main activity
- python - tls1记录python ssl上的tls1.2握手
- c - 使用链表在 C 中堆栈
- javascript - 如何使用 reactjs 和 css 创建垂直选项卡
- r - Rmarkdown 中的分组列
- java - 如何将此数组切换为用户未输入