知识图谱可视化之Echarts-静态图谱与Django构建动态图谱

置顶带鱼工作室

已于 2023-10-07 10:49:31 修改

阅读量9.5k

点赞数 10

分类专栏： python django 后台数据传送到前端文章标签： python 知识图谱 Echarts

于 2020-10-15 16:47:13 首次发布

本文链接：https://blog.csdn.net/liaoningxinmin/article/details/109096087

版权

python 同时被 3 个专栏收录

34 篇文章 8 订阅

订阅专栏

django

8 篇文章 3 订阅

订阅专栏

后台数据传送到前端

2 篇文章 1 订阅

订阅专栏

1 本文介绍

本文主要介绍知识图谱可视化的构建方法，使用Echarts工具进行构建，在之前的文章：知识图谱可视化之cytoscape.js构建知识图谱（django框架将数据由后台传到前台进行图谱构建）中介绍过使用Cytoscape.js工具进行静态图谱与Django动态图谱的构建方法，感兴趣的小伙伴可以自行查看。本文主要使用Echarts库进行构建，想要了解不同构建知识图谱可视化的同学可以参看本文与上面提到的文章。

2 Echarts

Echarts工具库是使用js代码进行各种工具图的构建，图形样式十分丰富，目前大部分网站图形均由Echarts构建，想要了解更多信息请查看Echarts官网。

3 主要工作

本文主要介绍使用Echarts进行图谱可视化的方法：

1）知识图谱的静态展示（静态html文件）

2）使用Python的django框架进行开发，并将后台业务逻辑生成的数据传送到前端js中进行展示，实现动态图谱构建，满足工程实际需要。

3.1 静态图谱可视化

首先展示静态html代码与效果图：

<!DOCTYPE html>
<html>
<head>
    <title>ECharts 关系图</title>
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <!-- use from online-->
    <script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.js"></script>
    <!-- use from local-->
    <script src="/static/js/echarts.min.js"></script>
</head>

<body>
<div id="main" style="width:1000px;height:800px"></div>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    var categories = [];
    for (var i = 0; i < 2; i++) {
        categories[i] = {
            name: '类目' + i
        };
    }
    option = {
        // 图的标题
        title: {
            text: 'ECharts 关系图'
        },
        // 提示框的配置
        tooltip: {
            formatter: function (x) {
                return x.data.des;
            }
        },
        // 工具箱
        toolbox: {
            // 显示工具箱
            show: true,
            feature: {
                mark: {
                    show: true
                },
                // 还原
                restore: {
                    show: true
                },
                // 保存为图片
                saveAsImage: {
                    show: true
                }
            }
        },
        legend: [{
            // selectedMode: 'single',
            data: categories.map(function (a) {
                return a.name;
            })
        }],
        series: [{
            type: 'graph', // 类型:关系图
            layout: 'force', //图的布局，类型为力导图
            symbolSize: 40, // 调整节点的大小
            roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [2, 10],
            edgeLabel: {
                normal: {
                    textStyle: {
                        fontSize: 20
                    }
                }
            },
            force: {
                repulsion: 2500,
                edgeLength: [10, 50]
            },
            draggable: true,
            lineStyle: {
                normal: {
                    width: 2,
                    color: '#4b565b',
                }
            },
            edgeLabel: {
                normal: {
                    show: true,
                    formatter: function (x) {
                        return x.data.name;
                    }
                }
            },
            label: {
                normal: {
                    show: true,
                    textStyle: {}
                }
            },

            // 数据
            data: [{name: 'node01', des: 'nodedes01', symbolSize: 70, category: 0,},
                {name: 'node02', des: 'nodedes02', symbolSize: 50, category: 1,},
                {
                name: 'node03',
                des: 'nodedes3',
                symbolSize: 50,
                category: 1,
            }, {
                name: 'node04',
                des: 'nodedes04',
                symbolSize: 50,
                category: 1,
            }, {
                name: 'node05',
                des: 'nodedes05',
                symbolSize: 50,
                category: 1,
            },{name: 'node06', des: 'nodedes06', symbolSize: 50, category: 2,}

            //add

            ],
            links: [{source: 'node01', target: 'node02', name: 'link01', des: 'link01des'},
                {
                source: 'node01',
                target: 'node03',
                name: 'link02',
                des: 'link02des'
            }, {
                source: 'node01',
                target: 'node04',
                name: 'link03',
                des: 'link03des'
            }, {
                source: 'node01',
                target: 'node05',
                name: 'link04',
                des: 'link05des'
            },
                {source: 'node06', target: 'node04', name: 'linkcat2', des: 'linkcat2'}
            ],
            categories: categories,
        }]
    };
    myChart.setOption(option);
</script>
</body>
</html>

效果图：

代码参考自：https://blog.csdn.net/qq_38737992/article/details/89042164

下面进行简单讲解，首先就是工具库的引用，想要展示图谱需要jquery与echarts库，因此可以通过如下代码引用：

<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <!-- use from online-->
    <script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.js"></script>
    <!-- use from local-->
    <script src="/static/js/echarts.min.js"></script>

引用方式有两种，第一种是通过cdn引用，也就是引用网络上的资源，这种方式不需要下载库到本地，同样我也写了本地引用的方式，需要将下载的库放入指定路径中，然后src的值为你存放库的路径，如上代码中最后一行。

下面对代码进行简单介绍：

var categories = [];
    for (var i = 0; i < 2; i++) {
        categories[i] = {
            name: '类目' + i
        };
    }

如上代码为展示图谱中有几个类目，类目信息我们可以通过效果图中最上方看到，同时图谱的层级关系也与类目有关系，可以看到图谱有两层，与类目数量正好对应，如果你想增加图谱的层级，例如想要展示3层的图谱，切记一定要修改类目中的 i 的值。假设你想要展示3层图谱，就将 i 的值修改为3。

option中主要是对图谱可视化展示的配置及图谱数据。配置在代码中均有相关注释，若你想了解更多参数配置，请详见官网的参数配置。直接介绍图谱数据的格式，取出一条节点数据进行介绍，

[{name: 'node01', des: 'nodedes01', symbolSize: 70, category: 0,}]

节点数据格式为列表中包含字典，name为节点的名称，即图谱可视化展示的名称，des为对节点的描述，即图谱可视化之后，将鼠标放置在节点上展示的内容，symbolSize为节点圆的大小，category为层级关系，0级为中心节点的层级，1级为中心节点外侧的节点层级。

下面介绍链接数据格式，取出一条链接数据进行介绍：

[{source: 'node01', target: 'node02', name: 'link01', des: 'link01des'}]

链接数据的格式与节点数据格式相同，source为链接的尾部节点名称，target为链接的头部节点名称-也就是箭头方向，name为链接上显示的文字，des为鼠标放置到链接上显示的内容。

到此为止对静态图谱可视化的介绍就到这了，下面介绍结合Django项目进行构建。

3.2 动态图谱的构建

上述介绍的静态构建图谱中的数据是固定的，一成不变的，而动态图谱的数据是变化的，后台传给前台什么数据，就会构建什么样式的图谱，图谱的样式有所不同。

Django项目的配置我在上篇文章中知识图谱可视化之cytoscape.js构建知识图谱（django框架将数据由后台传到前台进行图谱构建）已经介绍过了，在这里不做过多介绍，直接展示后台业务逻辑代码与前端的代码。

首先来看一下后台业务逻辑views代码：

def echart_json(request):
    #initial data [{name: 'node01', des: 'nodedes01', symbolSize: 70, category: 0, }]
    #iniaial link [{source: 'node01', target: 'node02', name: 'link01', des: 'link01des'}]
    #keypoint:echarts build knowledge graph is different from building by cytoscape.js
    #the former:pour number can't be '' in data part
    #the later:all of the parmers must be ''
    data = [{'name': '中国科学院计算技术研究所', 'des': '中国科学院计算技术研究所', 'symbolSize': 70, 'category': 0, }, \
            {'name': '徐志伟', 'des': '徐志伟', 'symbolSize': 50, 'category': 1, }, \
            {'name': '文继荣', 'des': '文继荣', 'symbolSize': 50, 'category': 1, }, \
            {'name': '钮心忻', 'des': '钮心忻', 'symbolSize': 50, 'category': 1, },]
    links = [{'target': '中国科学院计算技术研究所', 'source': '徐志伟', 'name': '属于', 'des': '作者-作者单位'}, \
             {'target': '中国科学院计算技术研究所', 'source': '文继荣', 'name': '属于', 'des': '作者-作者单位'}, \
             {'target': '中国科学院计算技术研究所', 'source': '钮心忻', 'name': '属于', 'des': '作者-作者单位'},]
    
    return render(request,'echarts-views.html',{'data':json.dumps(data),'link':json.dumps(links)})

在业务逻辑函数echart_json中定义了构建图谱需要的节点数据与链接数据，可以看到原始构建节点的数据中字典的key值并没有使用引号，而在echart_json中将所有的key值都使用引号引上，注意到数字类型的数据并没有使用引号，也就是key值为symbolSize与category的value值不需要使用引号，这与上篇文章中使用cytoscape.js构建动态图谱有所不同。

再回顾一下：cytoscape.js构建图谱需要将所有数据均使用引号引上，而Echarts构建动态图谱不是全部都需要引上，symbolSize与category对应的value值则不需要引上。

当然为了展示如何构建动态图谱，我并没有使用数据库，正常我们会通过后台获取数据库的相关数据，然后在将数据返回到后台处理为上述提到的数据格式，然后使用render方法将数据渲染到指定的html模版，注意将数据返回到前端时，需要使用json的dumps方法对数据进行压缩。

echarts-views.html文件：

<!DOCTYPE html>
<html>
<head>
    <title>ECharts 关系图</title>
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <!-- use from online-->
    <script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.js"></script>
    <!-- use from local-->
    <script src="/static/js/echarts.min.js"></script>


</head>

<body>
<div id="main" style="width:1000px;height:800px"></div>

<script type="text/javascript">
    var data = {{ data|safe }};
    var link = {{ link|safe }};
    alert(data);
    var myChart = echarts.init(document.getElementById('main'));
    var categories = [];
    for (var i = 0; i < 2; i++) {
        categories[i] = {
            name: '类目' + i
        };
    }
    option = {
        // 图的标题
        title: {
            text: 'ECharts 人物关系图'
        },
        // 提示框的配置
        tooltip: {
            formatter: function (x) {
                return x.data.des;
            }
        },
        // 工具箱
        toolbox: {
            // 显示工具箱
            show: true,
            feature: {
                mark: {
                    show: true
                },
                // 还原
                restore: {
                    show: true
                },
                // 保存为图片
                saveAsImage: {
                    show: true
                }
            }
        },
        legend: [{
            // selectedMode: 'single',
            data: categories.map(function (a) {
                return a.name;
            })
        }],
        series: [{
            type: 'graph',// 类型:关系图
            layout: 'force', //图的布局，类型为力导图
            symbolSize: 40, // 调整节点的大小
            roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [2, 10],
            edgeLabel: {
                normal: {
                    textStyle: {
                        fontSize: 20
                    }
                }
            },
            force: {
                repulsion: 2500,
                edgeLength: [10, 50]
            },
            draggable: true,
            lineStyle: {
                normal: {
                    width: 2,
                    color: '#4b565b',
                }
            },
            edgeLabel: {
                normal: {
                    show: true,
                    formatter: function (x) {
                        return x.data.name;
                    }
                }
            },
            label: {
                normal: {
                    show: true,
                    textStyle: {},
                    position:'inside'
                }
            },

            // 数据
            data: data,
            links: link,
            categories: categories,
        }]
    };
    myChart.setOption(option);
</script>
</body>

</html>

上述代码即为后台数据渲染到的前端文件，观察下述代码（由上述代码中摘抄）：

var data = {{ data|safe }};
var link = {{ link|safe }};
alert(data);

定义了两个变量 data 、link用于接受后台业务逻辑函数中传来的图谱数据，注意此处要使用safe进行过滤处理，然后使用alert方法查看我们接受数据的类型，只有数据类型为object类型才可以构建动态图谱，使用 alert(data); 方法，效果如下：

出现此警告框表示你的数据类型是正确的，可以用于构建图谱，构建效果如下图所示：

由于上篇文章中对Django项目的配置已经介绍，这里不做过多介绍。

如有问题，请留言交流，如需项目源码，请留言！

本文博主原创，如需转载，请注明出处！

带鱼工作室

关注

10
点赞
踩
107

收藏

觉得还不错? 一键收藏
打赏
16
评论
知识图谱可视化之Echarts-静态图谱与Django构建动态图谱

1 本文介绍本文主要介绍知识图谱可视化的构建方法，使用Echarts工具进行构建，在之前的文章：知识图谱可视化之cytoscape.js构建知识图谱（django框架将数据由后台传到前台进行图谱构建）中介绍过使用Cytoscape.js工具进行静态图谱与Django动态图谱的构建方法，感兴趣的小伙伴可以自行查看。本文主要使用Echarts库进行构建，想要了解不同构建知识图谱可视化的同学可以参看本文与上面提到的文章。2 EchartsEcharts工具库是使用js代码进行各种工具图的构建，图形样式
复制链接

扫一扫