Question

我有这个代码从xml文件中获取数据。我需要将这些数据提供给当前位于阵列中的Google图表。我需要将我的xml值传递给谷歌图表。任何人都可以帮我解决这个问题。以下是我的代码。

<!DOCTYPE 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('Pie').each(function() {
                    var sTitle = $(this).find('Title').text();
                    var sValue = $(this).find('Value').text();
                    values.push([sTitle, sValue]);
                });
                drawChart(values);
            },
            error: function() {
                alert("An error occurred while processing XML file.");
            }
        });
    });

    function drawChart(val) {
    alert(val);
        var data = google.visualization.arrayToDataTable([
            ['Task', 'Hours per Day'],
            ['Work',     11],
            ['Eat',      2],
            ['Commute',  2],
            ['Watch TV', 2],
            ['Sleep',    7]
        ]);

        var options = {
            title: 'My Daily Activities'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
    }
</script>

<title>My Read</title>
</head>

<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>

Xml文件

<?xml version="1.0" encoding="utf-8" ?>
    <Chart>
      <Pie>
         <Title>Task</Title>
         <Value>Hours per Day</Value>
      </Pie>
      <Pie>
         <Title>Work</Title>
         <Value>11</Value>
      </Pie>
      <Pie>
         <Title>Eat</Title>
         <Value>2</Value>
      </Pie>
      <Pie>
         <Title>Commute</Title>
         <Value>2</Value>
      </Pie>
      <Pie>
         <Title>Watch TV</Title>
         <Value>2</Value>
      </Pie>
      <Pie>
         <Title>Sleep</Title>
         <Value>7</Value>
      </Pie>
    </Chart>

Answer 1

更改此

var data = google.visualization.arrayToDataTable([
            ['Task', 'Hours per Day'],
            ['Work',     11],
            ['Eat',      2],
            ['Commute',  2],
            ['Watch TV', 2],
            ['Sleep',    7]
        ]);

到

var data = google.visualization.arrayToDataTable((Array.isArray(val) && val.length) ? val : [
    ['Task', 'Hours per Day'],
    ['Work',     11],
    ['Eat',      2],
    ['Commute',  2],
    ['Watch TV', 2],
    ['Sleep',    7]
]);

如果值数组并且不为空 - 将val传递给函数，否则传递默认选项。

此外，您需要将sValue从字符串转换为数字，例如

$(xml).find('Pie').each(function() {
    var sTitle = $(this).find('Title').text();
    var sValue = $(this).find('Value').text();

    if (!isNaN(+sValue)) {
        sValue = +sValue;
    } 

    values.push([sTitle, sValue]);
});

Answer 2

您已将该数组传递给drawChart()函数，

drawChart(values);

希望它能正常工作。

Answer 3

也许你只是通过两次调用drawChart来混淆自己：一次在google.setOnLoadCallback(drawChart)，一次在成功函数中。删除setOnLoadCallback中的一个（或创建一个关注两者的加载状态的函数，并在两者都加载时调用drawChart）。并实施Alexanders的建议。

将数组从一个函数传递到另一个函数

3 个答案: