jtopo实现关系图谱图效果-html代码-BFW代码库

jtopo实现关系图谱图效果

代码语言：html

所属分类：图表

代码描述：jtopo实现关系图谱图效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["jtopo-0.4.8"], function() {
                CanvasRenderingContext2D.prototype.wrapText = function(str, x, y) {
                    var textArray = str.split('\n');
                    if (textArray == undefined || textArray == null)return false;

                    var rowCnt = textArray.length;
                    var i = 0,
                    imax = rowCnt,
                    maxLength = 0; maxText = textArray[0];
                    for (; i < imax; i++) {
                        var nowText = textArray[i],
                        textLength = nowText.length;
                        if (textLength >= maxLength) {
                            maxLength = textLength;
                            maxText = nowText;
                        }
                    }
                    var maxWidth = this.measureText(maxText).width;
                    var lineHeight = this.measureText("元").width;
                    x -= lineHeight*2;
                    for (var j = 0; j < textArray.length; j++) {
                        var words = textArray[j];
                        this.fillStyle = '#eee'; //设置字体颜色
                        this.fillText(words, -(maxWidth/2), y-textArray.length*lineHeight/100);
                        // this.fillStyle = '#eee';//设置字体颜色
                        y += lineHeight;
                    }
                };
                var gxData = {
                    user: {
                        text: '长白山'
                    },
                    other: [{
                        text: 'text1\nowTextte\nztjjkk',
                        relation: '家人'
                    },
                        {
                            text: 'text1/3',
                            relation: '朋友'
                        },
                        {
                            text: 'text1/4.',
                            relation: '朋友'
                        },
                        {
                            text: 'text1/5.',
                            relation: '朋友朋友'
                        },
                        {
                            text: 'text1/6.',
                            relation: '同学'
                        },
                        {
                            text: 'text1/1.',
                            relation: '同学朋友朋友'
                        },
                        {
                            text: 'text1/2.',
                            relation: '同学朋友'
                        },
                        {
                            text: 'text1',
                            relation: '家人'
                        },
                        {
                            text: 'text1/',
                            relation: '家人'
                        },
                        {
                            text: 'text1/3',
                            relation: '朋友朋友'
                        },
                        {
                            text: 'text1/4.',
                            relation: '朋友'
                        },
                        {
                            text: 'text1',
                            relation: '家人'
                        },
                        {
                            text: 'text1/',
                            relation: '家人'
                .........完整代码请登录后点击上方下载按钮下载查看