谷歌图表在 MVC 中不起作用

Question

我想用数据库中的数据创建一个 Google 图表。

我有一个返回 Json 数据的操作，如下所示：

[{"Day":1,"Value":0.07,"Target":0.82},{"Day":2,"Value":1.00,"Target":0.82},{"Day":3,"Value":0.48,"Target":0.82},{"Day":4,"Value":0.63,"Target":0.82},{"Day":5,"Value":0.81,"Target":0.82},{"Day":6,"Value":0.18,"Target":0.82},{"Day":7,"Value":0.67,"Target":0.82},{"Day":8,"Value":0.70,"Target":0.82},{"Day":9,"Value":0.29,"Target":0.82},{"Day":10,"Value":0.47,"Target":0.82},{"Day":11,"Value":0.03,"Target":0.82},{"Day":12,"Value":0.67,"Target":0.82},{"Day":13,"Value":0.54,"Target":0.82},{"Day":14,"Value":0.32,"Target":0.82},{"Day":15,"Value":0.66,"Target":0.82},{"Day":16,"Value":0.22,"Target":0.82},{"Day":17,"Value":0.86,"Target":0.82},{"Day":18,"Value":0.53,"Target":0.82},{"Day":19,"Value":0.12,"Target":0.82},{"Day":20,"Value":0.48,"Target":0.82},{"Day":21,"Value":0.56,"Target":0.82},{"Day":22,"Value":0.32,"Target":0.82},{"Day":23,"Value":0.70,"Target":0.82},{"Day":24,"Value":0.48,"Target":0.82},{"Day":25,"Value":0.64,"Target":0.82},{"Day":26,"Value":0.20,"Target":0.82},{"Day":27,"Value":0.02,"Target":0.82},{"Day":28,"Value":0.24,"Target":0.82},{"Day":29,"Value":0.65,"Target":0.82}]

我有这个 PartialView：

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


<script type="text/javascript">
    var chartData;
    google.load('visualization', '1.0', { 'packages': ['corechart'] });
    google.charts.setOnLoadCallback(drawVisualization);

      $.ajax({
            url: '@Url.Action("GetDataGoogleChart", "Charts")',
            dataType: "json",
            type: "POST",
            contentType: "application/json,chartset=utf-8",
            cache: false,
            success: function(data) {
                chartData = data.d;
            },
            error: function() {
                alert("Error loading data! Please try again.");
            }
        }).done(function() {
            google.setOnLoadCallback(drawVisualization);
            drawVisualization();
        });



    function drawVisualization() {

        var data = google.visualization.arrayToDataTable(chartData);

        var options = {
            title: 'Some Title',
            seriesType: 'bars',
            series: { 2: { type: 'line' } }

        };

        var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }
</script>



<div id="chart_div" style="width: 900px; height: 500px;"></div>

当我尝试打开此局部视图时，我收到以下错误消息：

Uncaught ReferenceError: google is not defined

你能帮我做这个图表吗？

编辑 我的项目结构是：_Layout > MainPage > PartialView with chart

错误将我指向 MainPage - 第 6 行（当我单击它时，它显示了 _layout 的第 6 行 - “<meta charset="UTF-8" />”

Answer 1

这里发生了几件事。

首先，问题中发布的代码混合了 Google Charts 的版本。

有两个脚本源可以使用...

1)https://www.google.com/jsapi

加载语句看起来像这样......

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

2)https://www.gstatic.com/charts/loader.js

Load 语句如下所示，注意二级命名空间charts...

google.charts.load('current', {'packages': ['corechart']});
google.charts.setOnLoadCallback(drawVisualization);

后者，loader.js，现在是首选方法。

也

如this SO post 中所示，将setOnLoadCallback 与$(document).ready 结合使用也会导致问题。

为避免，回调函数可以直接在加载语句中引用。

$(document).ready(function(){
    google.charts.load('current', {
      'packages': ['corechart'],
      'callback': drawVisualization
    });
});

Answer 2

假设您的嵌入式脚本在外部 Google API 加载之前执行，请尝试通过将您的脚本包装在...中来延迟执行。

$(document).ready(function() {
...
}

或者，如果您不使用 jQuery...

document.addEventListener("DOMContentLoaded", function(event) { 
...
});

Answer 3

这里发生了两件事。

有两个脚本源可以使用...

1) https://www.google.com/jsapi

加载语句如下所示：

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

2) https://www.gstatic.com/charts/loader.js

Load 语句看起来像这样，注意二级命名空间图表...

google.charts.load('current', {'packages': ['corechart']});
google.charts.setOnLoadCallback(drawVisualization);

(loader.js)，现在是首选方法。

正如这篇 SO 帖子中所展示的，将 setOnLoadCallback 与 $(document).ready 结合使用也会导致问题。

回调函数可以直接在加载语句中引用。

$(document).ready(function(){
    google.charts.load('current', {
      'packages': ['corechart'],
      'callback': drawVisualization
    });
});