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>

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

未捕获的ReferenceError：谷歌未定义

你可以帮我制作这张图表吗？

修改我的项目结构是：_Layout＆gt; MainPage＆gt; 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结合使用也会导致问题。

要避免，可以在load语句中直接引用回调函数。

$(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结合使用也会导致问题。

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

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

GoogleChart无法在MVC中使用

3 个答案: