JQuery 发布到 .NET MVC 应用程序以显示 Google 图表

JQuery Post to a .NET MVC App to Display Google Chart

本文关键字：显示 Google 图表 应用程序 MVC NET JQuery      更新时间：2023-09-26

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

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

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

<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帖子来加载数据，因此我需要设置其他一些设置才能显示它。

事实证明，

这绝对是setOnLoadCallBack 函数的问题。我只是简单地删除了它并用一个简单的替换了它

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

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

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

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

相关文章：