如何使用外部json绘制Google组织结构图

时间:2018-07-26 18:42:14

标签: jquery json

我有一个来自Google图表的带有父级子关系的json的组织结构图。我没有得到如何从下面的结构化json呈现组织结构图。如果有其他格式的json可以帮助我解决这个问题,或者像其他任何插件d3js,即使它很好。任何人都可以帮助我。这是下面的代码。

html

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="chart_div"></div>

javascript

// Load the Visualization API and the piechart package.
google.charts.load('current', {'packages':['orgchart']});

// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var jsonData = $.ajax({
      url: "getjson.json",
      dataType: "json",
      async: false
      }).responseText;

  // Create our data table out of JSON data loaded from server.
  var data = new google.visualization.DataTable(jsonData);

  // Instantiate and draw our chart, passing in some options.
  var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
  chart.draw(data, {width: 400, height: 240});
}

getjson.json

{
    "name": "flare",
    "children": [{
            "name": "G1A",
            "children": [{
                    "name": "G2A",
                    "children": [{
                            "name": "G3A",
                            "size": 3938
                        },
                        {
                            "name": "G3B",
                            "size": 3812
                        },
                        {
                            "name": "G3C",
                            "size": 6714
                        },
                        {
                            "name": "G3D",
                            "size": 743
                        }
                    ]
                },
                {
                    "name": "G2B",
                    "children": [{
                            "name": "G3E",
                            "size": 3534
                        },
                        {
                            "name": "G3F",
                            "size": 5731
                        },
                        {
                            "name": "G3G",
                            "size": 7840
                        },
                        {
                            "name": "G3H",
                            "size": 5914
                        },
                        {
                            "name": "G3I",
                            "size": 3416
                        }
                    ]
                }
            ]
        },
        {
            "name": "G1B",
            "children": [{
                    "name": "G2C",
                    "children": [{
                            "name": "G3J",
                            "size": 1983
                        },
                        {
                            "name": "G3K",
                            "size": 2047
                        }

                    ]
                },
                {
                    "name": "G2D",
                    "children": [{
                            "name": "G3L",
                            "size": 1983
                        },
                        {
                            "name": "G3M",
                            "size": 2047
                        }

                    ]
                },
                {
                    "name": "G2E",
                    "children": [{
                            "name": "G3N",
                            "size": 1983
                        },
                        {
                            "name": "G3O",
                            "size": 2047
                        }

                    ]
                }


            ]
        },
        {
            "name": "G1C",
            "children": [{
                    "name": "G2F",
                    "children": [{
                            "name": "G3P",
                            "size": 721
                        },
                        {
                            "name": "G3Q",
                            "size": 4294
                        }

                    ]
                },
                {
                    "name": "G2G",
                    "children": [{
                            "name": "G3R",
                            "size": 721
                        },
                        {
                            "name": "G3S",
                            "size": 4294
                        }

                    ]
                },
                {
                    "name": "G2H",
                    "children": [{
                            "name": "G3T",
                            "size": 721
                        },
                        {
                            "name": "G3U",
                            "size": 4294
                        }

                    ]


                }

            ]
        },

        {
            "name": "G1D",
            "children": [{
                    "name": "G2I",
                    "size": 8258
                },

                {
                    "name": "G2J",
                    "children": [{
                            "name": "G3V",
                            "size": 3165
                        },
                        {
                            "name": "G3W",
                            "size": 2815
                        },
                        {
                            "name": "G3X",
                            "size": 3366
                        }
                    ]
                },

                {
                    "name": "G2K",
                    "children": [{
                            "name": "G3Y",
                            "size": 6367
                        }

                    ]
                }


            ]
        }

    ]
}

0 个答案:

没有答案