Nur*_*nov 2 javascript r highcharts
我们正在尝试使用R 语言从https://www.highcharts.com/docs/chart-and-series-types/organization-chart绘制此组织结构图
我们已经用 R 的 highcharter 库构建了这个图,但我们无法将这个图开发成我们想要的

devtools::install_github("jbkunst/highcharter")
library(highcharter)
highchart() %>%
hc_chart(type = 'organization') %>%
hc_add_series(
data = list(
list(from = 'Share Holders', to = 'Board'),
list(from = 'Board', to = 'Grethe Hjetland CEO'),
list(from = 'Grethe Hjetland CEO', to = 'Christer Vasseng CTO'),
list(from = 'Grethe Hjetland CEO', to = 'Anita Nesse CPO'),
list(from = 'Grethe Hjetland CEO', to = 'Vidar Brekke CMO'),
list(from = 'Anita Nesse CPO', to = 'Sales manager'),
list(from = 'Anita Nesse CPO', to = 'WEB')
),color = 'red'
)
Run Code Online (Sandbox Code Playgroud)
我们想要的是...
这是 JavaScript 代码(您还可以在源代码中看到所有 Html Css 和 JavaScript)
Highcharts.chart('container', {
chart: {
height: 600,
inverted: true
},
title: {
text: 'Highcharts Org Chart'
},
accessibility: {
point: {
descriptionFormatter: function(point) {
var nodeName = point.toNode.name,
nodeId = point.toNode.id,
nodeDesc = nodeName === nodeId ? nodeName : nodeName + ', ' + nodeId,
parentDesc = point.fromNode.id;
return point.index + '. ' + nodeDesc + ', reports to ' + parentDesc + '.';
}
}
},
series: [{
type: 'organization',
name: 'Highsoft',
keys: ['from', 'to'],
data: [
['Shareholders', 'Board'],
['Board', 'CEO'],
['CEO', 'CTO'],
['CEO', 'CPO'],
['CEO', 'CSO'],
['CEO', 'CMO'],
['CEO', 'HR'],
['CTO', 'Product'],
['CTO', 'Web'],
['CSO', 'Sales'],
['CMO', 'Market']
],
levels: [{
level: 0,
color: 'silver',
dataLabels: {
color: 'black'
},
height: 25
}, {
level: 1,
color: 'silver',
dataLabels: {
color: 'black'
},
height: 25
}, {
level: 2,
color: '#980104'
}, {
level: 4,
color: '#359154'
}],
nodes: [{
id: 'Shareholders'
}, {
id: 'Board'
}, {
id: 'CEO',
title: 'CEO',
name: 'Grethe Hjetland',
image: 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/12132317/Grethe.jpg'
}, {
id: 'HR',
title: 'HR/CFO',
name: 'Anne Jorunn Fjærestad',
color: '#007ad0',
image: 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/12132314/AnneJorunn.jpg',
column: 3,
offset: '75%'
}, {
id: 'CTO',
title: 'CTO',
name: 'Christer Vasseng',
column: 4,
image: 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/12140620/Christer.jpg',
layout: 'hanging'
}, {
id: 'CPO',
title: 'CPO',
name: 'Torstein Hønsi',
column: 4,
image: 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/12131849/Torstein1.jpg'
}, {
id: 'CSO',
title: 'CSO',
name: 'Anita Nesse',
column: 4,
image: 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/12132313/Anita.jpg',
layout: 'hanging'
}, {
id: 'CMO',
title: 'CMO',
name: 'Vidar Brekke',
column: 4,
image: 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/13105551/Vidar.jpg',
layout: 'hanging'
}, {
id: 'Product',
name: 'Product developers'
}, {
id: 'Web',
name: 'Web devs, sys admin'
}, {
id: 'Sales',
name: 'Sales team'
}, {
id: 'Market',
name: 'Marketing team'
}],
colorByPoint: false,
color: '#007ad0',
dataLabels: {
color: 'white'
},
borderColor: 'white',
nodeWidth: 65
}],
tooltip: {
outside: true
},
exporting: {
allowHTML: true,
sourceWidth: 800,
sourceHeight: 600
}
});
Run Code Online (Sandbox Code Playgroud)
任何人都可以帮助我们用 R 语言绘制此组织结构图,或者是否可以在 R 中运行 JavaScript 代码以获得此图表?提前致谢!
这里有一个示例代码:
library(highcharter)
highchart() %>%
hc_chart(type = 'organization', inverted = TRUE) %>%
hc_title(text = 'Highcharts Org Chart') %>%
hc_add_series(
name = 'Highsoft',
data = list(
list(from = 'Shareholders', to = 'Board'),
list(from = 'Board', to = 'CEO'),
list(from = 'CEO', to = 'CTO'),
list(from = 'CEO', to = 'CPO'),
list(from = 'CEO', to = 'CSO'),
list(from = 'CEO', to = 'CMO'),
list(from = 'CEO', to = 'HR'),
list(from = 'CTO', to = 'Product'),
list(from = 'CTO', to = 'Web'),
list(from = 'CSO', to = 'Sales'),
list(from = 'CMO', to = 'Market')
),
levels = list(
list(level = 0, color = 'silver', dataLabels = list(color = 'black'), height = 55),
list(level = 1, color = 'silver', dataLabels = list(color = 'black'), height = 55),
list(level = 2, color = '#980104'),
list(level = 4, color = '#359154')
),
nodes = list(
list(id = 'Shareholders'),
list(id = 'Board'),
list(id = 'CEO', title = 'CEO', name = 'Grethe Hjetland', image = 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/12132317/Grethe.jpg'),
list(id = 'HR', title = 'HR/CFO', name = 'Anne Jorunn Fjarestad', color = '#007ad0', image = 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/12132314/AnneJorunn.jpg', column = 3, offset = '75%'),
list(id = 'CTO', title = 'CTO', name = 'Christer Vasseng', color = '#007ad0', image = 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/12140620/Christer.jpg', column = 4, layout = 'hanging'),
list(id = 'CPO', title = 'CPO', name = 'Torstein Honsi', image = 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/12131849/Torstein1.jpg', column = 4),
list(id = 'CSO', title = 'CSO', name = 'Anita Nesse', image = 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/12132313/Anita.jpg', column = 4, layout = 'hanging'),
list(id = 'CMO', title = 'CMO', name = 'Vidar Brekke', image = 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/13105551/Vidar.jpg', column = 4, layout = 'hanging'),
list(id = 'Product', name = 'Product developers'),
list(id = 'Web', name = 'Web devs, sys admin'),
list(id = 'Sales', name = 'Sales team'),
list(id = 'Market', name = 'Marketing team')
),
colorByPoint = TRUE,
color = '#007ad0',
dataLabels = list(color = 'white'),
borderColor = 'white',
nodeWidth = 65
) %>%
hc_tooltip(outside = TRUE)
Run Code Online (Sandbox Code Playgroud)
你可以看到R结构。如果要在其中使用 JavaScript 代码,可以使用 JS() 方法。更多关于 R 中 Highcharts 的示例(使用 JS() 方法),您可以在我的 StackOverflow 配置文件中的“答案”选项卡中找到。
如果您还有其他问题,请告诉我。
编辑:某些属性(如颜色)在 Highcharter 包装器中不起作用。我建议在 Highcharter repo 上创建一个 GitHub 票证:https : //github.com/jbkunst/highcharter/issues 也许包装器的作者会知道更多。