highcharts实现组织架构图

Highcharts可以通过使用“sankey”和“dependencywheel”模块来实现组织架构图。下面是一些示例代码和说明来帮助你开始：

1. Sankey图：

Highcharts.chart('container', {
    title: {
        text: 'Employee Flow'
    },
    series: [{
        type: 'sankey',
        keys: ['from', 'to', 'weight'],
        data: [
            ['John', 'Jane', 5],
            ['John', 'Joe', 3],
            ['Jane', 'Joe', 2],
            ['John', 'Fred', 2],
            ['Jane', 'Fred', 4],
            ['Joe', 'Fred', 3]
        ],
        nodes: [{
            id: 'John'
        }, {
            id: 'Jane'
        }, {
            id: 'Joe'
        }, {
            id: 'Fred'
        }],
        links: [{
            source: 'John',
            target: 'Jane',
            value: 5
        }, {
            source: 'John',
            target: 'Joe',
            value: 3
        }, {
            source: 'Jane',
            target: 'Joe',
            value: 2
        }, {
            source: 'John',
            target: 'Fred',
            value: 2
        }, {
            source: 'Jane',
            target: 'Fred',
            value: 4
        }, {
            source: 'Joe',
            target: 'Fred',
            value: 3
        }]
    }]
});

在上面的代码中，我们使用了“sankey”类型的系列，指定了“from”，“to”和“weight”键来表示数据。我们还为每个节点定义了一个“id”，并使用“links”数组来指定节点之间的关系。

2. Dependency Wheel图：

Highcharts.chart('container', {
    chart: {
        type: 'dependencywheel'
    },
    title: {
        text: 'Employee Skills'
    },
    series: [{
        name: 'Skills',
        keys: ['from', 'to', 'weight'],
        data: [
            ['John', 'HTML', 4],
            ['John', 'CSS', 3],
            ['John', 'JavaScript', 5],
            ['Jane', 'HTML', 5],
            ['Jane', 'CSS', 4],
            ['Jane', 'JavaScript', 2],
            ['Joe', 'HTML', 2],
            ['Joe', 'CSS', 3],
            ['Joe', 'JavaScript', 3]
        ],
        dataLabels: {
            color: '#333',
            textPath: {
                enabled: true,
                attributes: {
                    dy: 5
                }
            },
            distance: 10
        },
        levels: [{
            level: 1,
            color: 'silver',
            borderWidth: 2
        }, {
            level: 2,
            colorByPoint: true,
            dataLabels: {
                style: {
                    textShadow: false
                }
            }
        }],
        colors: ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9', '#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1'],
        borderColor: '#999',
        borderWidth: 1
    }]
});

在上面的代码中，我们使用了“dependencywheel”类型的图表，指定了“from”，“to”和“weight”键来表示技能。我们还为每个技能定义了一个节点，并使用“dataLabels”属性来设置节点标签的样式和位置。我们还定义了两个级别，第一个级别的颜色为银色，第二个级别的颜色根据数据点的值自动设置。最后，我们使用“colors”属性来设置数据点的颜色，使用“borderColor”和“borderWidth”属性来设置边框的样式。