javascript - GoogleChart 无法在 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>

当我尝试打开此部分 View 时，收到此错误消息:

Uncaught ReferenceError: google is not defined

你能帮我制作这个图表吗？

编辑 我的项目结构是:_布局 > MainPage > 带图表的 PartialView

错误将我指向 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 结合使用也可能会导致问题。

为了避免这种情况，可以在 load 语句中直接引用回调函数。

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