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

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

javascript jquery xml

Javascript 使用jquery使用父元素id检索XML子节点,javascript,jquery,xml,Javascript,Jquery,Xml,我有一个图表，它使用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>

我有一个图表，它使用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>


加载（“可视化”，“1”{
软件包：[“corechart”]
});
setOnLoadCallback（drawChart）；
var值=[]；
$（文档）.ready（函数（）{
$.ajax({
键入：“获取”，
url:“ChartData.xml”，
数据类型：“xml”，
成功：函数（xml）{
$（xml）.find（“chart[id='t']”）.each（function（）{
$（xml）.find（'slice'）.each（函数（）{
var sTitle=$（this.find（'Title'）.text（）；
var sValue=parseInt（$（this.find（'Value'）.text（））；
push（[sTitle，sValue]）；
});
});             
绘图（数值）；
},
错误：函数（）{
警报（“处理XML文件时出错。”）；
}
});
});
功能绘图图（val）{
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'title'）；
data.addColumn（'number'，'value'）；
data.addRows（val）；
var options={PieSiceText:'none'，
图表区：{左：10，右：10，顶部：10，底部：20，宽度：“90%”，
图例：{对齐方式：'center'，文本样式：{颜色：'#5c'，字体大小：12}}，
pieHole:0.5，颜色：[“F6891F”、“A59B91”、“72C5EF”、“53585A”、“C8502B”]，
工具提示：{showColorCode:true，文本：'percentage'}，
is3D：错，
工具提示：{trigger:'selection'，textStyle:{color:'#5c'，fontSize:12，showColorCode:true，text:'percentage'}，
宽度：500，
身高：400，
};
var chart=new google.visualization.PieChart（document.getElementById（'PieChart'）；
图表绘制（数据、选项）；
}
测试图表| Russell Investments Canada

XML文件（ChartData.XML）


测试1
30
测试2
26
测试3
40
测试4
4.
测试1
30
测试2
26
测试3
40
测试4
4.

您可以组合您的迭代：

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

因为只有一个id为

的元素，您希望在其中获得

切片

标记

var xml='test1 30 Test 2 26 Test 3 40 Test 4 4 Test 1 30 Test 2 26 Test 3 40 Test 4 4'；
$（xml）.find（'chart[id=“t”]slice'）。每个（函数（）{
var sTitle=$（this.find（'Title'）.text（）；
var sValue=parseInt（$（this.find（'Value'）.text（））；
$（'p'）。追加（[sTitle，sValue]+“
”）；
});
p{
背景：黑色；颜色：白色；
}

@user3689990很高兴这有帮助。
$(xml).find("chart[id='t'] slice").each(function() {