Question

我正在阅读JSON数据并尝试从该数据构建节点。我希望能够点击并切换显示更多人。它没有读取JSON数据，但是现在我正在从那里读取它破坏了吗？所以我不太确定什么是错的？这是切换snippit，我添加了一个jsfiddle来查看完整的代码？有任何想法吗？我构建JSON数据错了吗？

    var runonce = google.visualization.events.addListener(chart, 'ready', function() {
    var previous;
    $('#chart_div').on('click', 'div', function () {
        console.log(this);
        var selection = chart.getSelection();
        var row;
        if (selection.length == 0) {
            row = previous;
        }
        else {
            row = selection[0].row;
            previous = row;
        }
        var collapsed = chart.getCollapsedNodes();
        var collapse = (collapsed.indexOf(row) == -1);
        chart.collapse(row, collapse);
        chart.setSelection();
    });
    google.visualization.events.removeListener(runonce);

    for (var i = 0; i < data.getNumberOfRows(); i++) {
        chart.collapse(i, true);
    }
});

http://jsfiddle.net/w8Ytq/63/

Answer 1

我建议在图表上使用select事件，onclick似乎不适合我。

另一个问题可能是在初始抽奖后每一行都被折叠虽然点击了最顶层的人，但由于其他行仍处于折叠状态，因此无法显示，但不确定。

var orgChartData = [
    {
        "Name": "Tom",
        "Role": "VP",
        "Email": "Tom@aol.com",
        "Manager": ""
    },
    {
        "Name": "Ben",
        "Role": "Manager",
        "Email": "Ben@aol.com",
        "Manager": "Tom"
    },
    {
        "Name": "Billy",
        "Role": "Manager",
        "Email": "Billy@aol.com",
        "Manager": "Tom"
    }
];

google.load('visualization', '1', {packages: ['orgchart']});
google.setOnLoadCallback(drawChart);

function drawChart() {
    var previous = 0;
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('string', 'Manager');
    data.addColumn('string', 'ToolTip');

    for (i = 0; i < orgChartData.length; i++) {
        data.addRow(
          [
            {
              v: orgChartData[i].Name,
              f: orgChartData[i].Name + "<br>" + 
                 orgChartData[i].Role + "<br>" + 
                 '<a href="mailto:' + orgChartData[i].Email + 
                 '?Subject=Service Request" target="_top">' + 
                 orgChartData[i].Email + '</a>'
            },
            orgChartData[i].Manager,
            orgChartData[i].Role
          ]
        );
    }

    var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
    google.visualization.events.addListener(chart, 'select', toggleDisplay);

    chart.draw(data, {
        allowHtml: true
    });

    function toggleDisplay() {
        var selection = chart.getSelection();
        var row;
        if (selection.length == 0) {
            row = previous;
        }
        else {
            row = selection[0].row;
            previous = row;
        }
        var collapsed = chart.getCollapsedNodes();
        var collapse = (collapsed.indexOf(row) == -1);
        chart.collapse(row, collapse);
        chart.setSelection([{row: row, column: null}]);
    }
}

<script src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>

点击切换Google组织结构图即可？

1 个答案: