Google chart api - 读取xml以形成组织结构图

时间:2013-09-05 14:48:56

标签: google-visualization

我现在第一次使用谷歌图表... 我的要求是读取xml内容以形成图表.. 我需要传递xml文件名,以便从特定标签中读取值...以下是我迄今为止尝试过的...但是没有成功......

XML文件:(FlowChart.xml)

<?xml version="1.0" encoding="utf-8" ?>
<Flow>
  <Node>
    <Id>AN001</Id>
    <Type>Annc</Type>
    <Description>Welcome msg</Description>
    <Next>MN001</Next>
  </Node>
  <Node>
    <Id>MN001</Id>
    <Type>Menu</Type>
    <Description>Language Selection</Description>
    <Next>AN002</Next>
  </Node>
</Flow>

脚本:

google.load('visualization', '1', {packages:['orgchart']});

        $(document).ready(function(){
             $.ajax({
                  type: "GET",
                  url: "FlowChart.xml",
                  dataType: "xml",
                  success: xmlParser
              });
            });

        function xmlParser(xml) {
            $('#load').fadeOut();
            $(xml).find("Node").each(function () {
                title = $(this).find("Id").text();
                alert('Hi');
            });
        }
      google.setOnLoadCallback(drawChart);

我在没有googleJSAPI的情况下使用了相同的代码,并找到了所需的结果... 请帮忙...

1 个答案:

答案 0 :(得分:1)

试试这个:

function xmlParser(xml) {
    $('#load').fadeOut();

    var id, type, description, next;
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Id');
    data.addColumn('string', 'Type');
    data.addColumn('string', 'Description');
    data.addColumn('string', 'Next');

    // parse the XML
    $(xml).find("Node").each(function () {
        id = $(this).find("Id").text();
        type = $(this).find("Type").text();
        description = $(this).find("Description").text();
        next = $(this).find("Next").text();
        data.addRow([id, type, description, next]);
    });

    // do something with data
}
function drawChart() {
    $.ajax({
        type: "GET",
        url: "FlowChart.xml",
        dataType: "xml",
        success: xmlParser
    });
}
google.load('visualization', '1', {packages: ['orgchart'], callback: drawChart});