highcharts师生图谱

效果图：

js源代码：

Highcharts.chart('container', {
    chart: {
        height: 300,
        inverted: true
    },
    title: {
        text: '季羡林[师生图谱]'
    },
    series: [{
        type: 'organization',
        name: 'Highsoft',
        keys: ['from', 'to'],
        data: [
            ['季羡林', '任远'],
            ['季羡林', '段晴'],
            ['季羡林', '王邦维'],
            ['季羡林', '葛维钧'],
            ['季羡林', '钱文忠']
        ],
        levels: [{
            level: 0,
            color: '#980104'
        }, {
            level: 2,
            color: '#359154'
        }],
        nodes: [ {
            id: '季羡林',
            title: '季羡林',
            name: '教授 国学大师',
            image: 'https://dss1.bdstatic.com/6OF1bjeh1BF3odCf/it/u=1299220512,1649072571&fm=74&app=80&f=JPEG&size=f121,121?sec=1880279984&t=f6a1aabe3736a893020761feb0d913d7'
        }, {
            id: '任远',
            title: '任远',
            name: '学生 文学家',
            color: '#007ad0',
            image: 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/12132314/AnneJorunn.jpg',
            column: 1
        }, {
            id: '段晴',
            title: '段晴',
            name: '学生 文学家',
            column: 1,
            image: 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/12140620/Christer.jpg',
            layout: 'hanging'
        }, {
            id: '王邦维',
            title: '王邦维',
            name: '学生 文学家',
            column: 1,
            image: 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/12131849/Torstein1.jpg'
        }, {
            id: '葛维钧',
            title: '葛维钧',
            name: '学生 文学家',
            column: 1,
            image: 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/12132313/Anita.jpg',
            layout: 'hanging'
        }, {
            id: '钱文忠',
            title: '钱文忠',
            name: '学生 文学家',
            column: 1,
            image: 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/13105551/Vidar.jpg',
            layout: 'hanging'
        }, {
            id: 'Product',
            name: '产品研发'
        }, {
            id: 'Web',
            name: '运维',
            description: '网站开发，系统维护'
        }, {
            id: 'Sales',
            name: '销售部'
        }, {
            id: 'Market',
            name: '市场部'
        }],
        colorByPoint: false,
        color: '#007ad0',
        dataLabels: {
            color: 'white'
        },
        borderColor: 'white',
        nodeWidth: 65
    }],
    tooltip: {
        outside: true
    },
    exporting: {
        allowHTML: true,
        sourceWidth: 800,
        sourceHeight: 600
    }
});