Question

我有这个图表，它使用xml文件将数据抓取到图表中。此xml文件包含多个图表的数据。我成功地设法获取数据并绘制图表。但我正在努力通过使用jquery使用父元素id来检索XML子节点。以下是js代码和xml文件。

HTML文件

    <html>
    <head>
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script>

        <script type="text/javascript" src="https://www.google.com/jsapi"></script>

        <script type="text/javascript">

            google.load("visualization", "1", {
                packages: ["corechart"]
            });

            google.setOnLoadCallback(drawChart);

            var values = [];

            $(document).ready(function() {
                $.ajax({
                    type: "GET",
                    url: "ChartData.xml",
                    dataType: "xml",
                    success: function(xml) {
                        $(xml).find("chart[id='t']").each(function() {
                               $(xml).find('slice').each(function() {
                                    var sTitle = $(this).find('Title').text();
                                    var sValue = parseInt($(this).find('Value').text());
                                    values.push([sTitle, sValue]);
                                });
                            });             
                            drawChart(values);
                    },
                    error: function() {
                        alert("An error occurred while processing XML file.");
                    }
                });
            });

            function drawChart(val) {

                var data = new google.visualization.DataTable();
                data.addColumn('string', 'title');
                data.addColumn('number', 'value');
                data.addRows(val);

                var options = { pieSliceText:'none',
                    chartArea:{left: 10, right: 10, top: 10, bottom: 20, width: '90%'},
                    legend: { alignment:'center', textStyle: {color: '#5C5C5C', fontSize: 12} },    
                    pieHole: 0.5, colors: ['#F6891F', '#A59B91', '#72C5EF', '#53585A', '#C8502B'], 
                    tooltip: {showColorCode: true,text:'percentage'}, 
                    is3D: false,
                    tooltip: {trigger: 'selection', textStyle: {color: '#5C5C5C', fontSize: 12, showColorCode: true,text:'percentage'} },
                    width: 500,
                    height: 400,
                };

                var chart = new google.visualization.PieChart(document.getElementById('piechart'));
                chart.draw(data, options);
            }

        </script>

        <title>Test Charts | Russell Investments Canada</title>
    </head>

    <body>
        <div id="piechart"></div>
    </body>
    </html>

XML文件（ChartData.xml）

    <?xml version="1.0" encoding="utf-8" ?>
    <charts>
        <chart id="t">
            <slice>
                <Title>Test 1</Title>
                <Value>30</Value>
            </slice>
            <slice>
                <Title>Test 2</Title>
                <Value>26</Value>
            </slice>
            <slice>
                <Title>Test 3</Title>
                <Value>40</Value>
            </slice>
            <slice>
                <Title>Test 4</Title>
                <Value>4</Value>
            </slice>
        </chart>

        <chart id="a">
            <slice>
                <Title>Test 1</Title>
                <Value>30</Value>
            </slice>
            <slice>
                <Title>Test 2</Title>
                <Value>26</Value>
            </slice>
            <slice>
                <Title>Test 3</Title>
                <Value>40</Value>
            </slice>
            <slice>
                <Title>Test 4</Title>
                <Value>4</Value>
            </slice>
        </chart>
    </charts>

Answer 1

您可以结合您的迭代：

$(xml).find("chart[id='t'] slice").each(function() {

因为只有一个ID为t的元素，并且您希望其中包含slice标记。

＆＃13;

var xml = '<charts><chart id="t">    <slice>      <Title>Test 1</Title>    <Value>30</Value>    </slice>    <slice>      <Title>Test 2</Title>      <Value>26</Value>    </slice>    <slice>      <Title>Test 3</Title>      <Value>40</Value>    </slice>    <slice>      <Title>Test 4</Title>      <Value>4</Value>    </slice>  </chart>  <chart id="a ">    <slice>      <Title>Test 1</Title>      <Value>30</Value>    </slice>    <slice>      <Title>Test 2</Title>      <Value>26</Value>    </slice>    <slice>      <Title>Test 3</Title>      <Value>40</Value>    </slice>    <slice>      <Title>Test 4</Title>      <Value>4</Value>    </slice>  </chart></charts>';

$(xml).find('chart[id="t"] slice').each(function() {
  var sTitle = $(this).find('Title').text();
  var sValue = parseInt($(this).find('Value').text());
  $('p').append([sTitle, sValue] + "<br/>");
});

＆＃13;

p{
background:black; color:white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p></p>

＆＃13;

使用jquery使用父元素id检索XML子节点

1 个答案: