我们如何用R语言绘制Highcarts组织结构图? [英] How can we plot Highcarts organization chart in R language?

问题描述

我们正在尝试从 https:绘制此组织结构图://R语言中的//www.highcharts.com/docs/chart-and-series-types/organization-chart

我们已经使用R的highcharter库构建了该图，但是我们无法将此图开发到我们想要的

We have build this plot with highcharter library of R but we can not develop this plot to what we want

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'
  )

我们想要的是...

这是源代码这是JavaScript代码(您也可以在源代码中看到所有Html Css和JavaScript)

Here is JavaScript code is (You can see also in source code all Html Css and 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
  }

});

任何人都可以帮助我们以R语言绘制此组织结构图，或者可以在R中运行JavaScript代码以获取此结构图吗? 预先感谢！

Can anyone help us to plot this organization chart in R language or is it possible to run JavaScript code in R in order to get this chart? Thanks in advance!

推荐答案

这里有示例代码:

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)

您可以看到R结构.如果要在其中使用JavaScript代码，则可以使用JS()方法.您可以在我的StackOverflow配置文件的答案"标签中找到R中Highcharts的更多示例.

You can see the R structure. If you want to use JavaScript code in it, you can use JS() method. More examples of Highcharts in R (with JS() method) you can find in my StackOverflow profile in 'Answers' tab.

如果您还有其他问题，请告诉我.

Let me know if you have further questions.

某些属性(如颜色)在Highcharter包装器中不起作用.我建议在Highcharter回购上创建GitHub票证: https://github.com/jbkunst/highcharter/issues 也许包装的作者会了解更多.

edit: some properties (like color) don't work in Highcharter wrapper. I suggest creating a GitHub ticket on Highcharter repo: https://github.com/jbkunst/highcharter/issues Maybe the author of the wrapper will know more.

这篇关于我们如何用R语言绘制Highcarts组织结构图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！