0

我有一个应用程序使用 Jquery (Ajax) 发布到我的服务器，并在页面上接收和显示 HTML 数据。这是一个非常简单的 JQuery 调用，如下所示：

function LoadStats(isUpdate) {
    $.ajax({
        cache: false,
        url: url,
        data: {
            {someData, removed for SF}
        },
        success: function (data) {
            $("#statsBox").html(data);
        }
    });
}

我想做的是在这个框中显示一个简单的谷歌图表。但是，当我这样做时，javascript 似乎无法正确显示。我在 MVC 视图中使用 Google Charts 中的基本示例，如下所示：

<div>HTML Here. Hello</div>
<script type="text/javascript">

        google.load("visualization", "1", {packages:["corechart"]});
        google.setOnLoadCallback(drawChart);
        function drawChart() {
            var data = google.visualization.arrayToDataTable([
              ['Year', 'Sales'],
              ['2004',  1000     ],
              ['2005',  1170     ],
              ['2006',  660       ],
              ['2007',  1030      ]
            ]);

            var options = {
                title: 'Company Performance',
                vAxis: {title: 'Year',  titleTextStyle: {color: 'red'}}
            };

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

</script>

我最初的尝试包括将对 google.com/jsapi 脚本的引用放在视图本身中，这给了我一个错误，即 Google 未定义。所以我把对 API 的引用放在我的页面的标题中，这消除了错误，但现在当它加载时，它会使屏幕空白。没有错误，只是一个白色的空白页。

请记住，一旦我真正让图表工作，我将使用来自服务器的数据填充它，因此我不只是将它放在页面本身中。我在这里想念什么？我觉得它与 setOnLoadCallback 有关，因为我正在使用 jquery 帖子加载数据，所以我需要设置一些其他设置才能显示它。

4

1 回答 1

0

事实证明，这绝对是 setOnLoadCallBack 函数的问题。我只是将其删除并用一个简单的替换它

        $(function () {
            drawChart();
        });

我还必须在页面上加载图表，而不是在服务器上。我只是把这个：

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

在服务器上。感谢这篇 StackOverflow 帖子。

于 2013-10-16T23:35:32.763 回答