Javascript 谷歌图表在MVC中不起作用

我想用数据库中的数据创建一个谷歌图表

我有一个返回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}]

我有一个观点：

 <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>

var图表数据；
load（'visualization'，'1.0'，{'packages'：['corechart']}）；
google.charts.setOnLoadCallback（drawVisualization）；
$.ajax({
url:'@url.Action（“GetDataGoogleChart”，“Charts”），
数据类型：“json”，
类型：“POST”，
contentType:“应用程序/json，图表集=utf-8”，
cache:false，
成功：功能（数据）{
chartData=data.d；
},
错误：函数（）{
警报（“加载数据时出错！请重试”）；
}
}).done（函数（）{
setOnLoadCallback（drawVisualization）；
绘图可视化（）；
});
函数drawVisualization（）{
var data=google.visualization.arrayToDataTable（chartData）；
变量选项={
标题：“一些标题”，
序列类型：“条”，
系列：{2:{type:'line'}}
};
var chart=new google.visualization.ComboChart（document.getElementById（'chart_div'））；
图表绘制（数据、选项）；
}

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

未捕获引用错误：未定义google

你能帮我做这个图表吗

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

---

错误将我指向主页-第6行（当我单击它时，它会显示_布局-“

”

的第6行，假设您的嵌入式脚本在外部Google API加载之前执行，请尝试通过将脚本包装在

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

或者，如果您没有使用jQuery

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

---

这里发生了几件事

首先，问题中的代码混合了谷歌图表的版本

有两个脚本源可以使用

(一)

Load语句如下所示

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

(二)

Load语句如下所示，请注意辅助名称空间

charts

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

后者，

loader.js

，现在是首选方法

同时

如中所示，将

setOnLoadCallback

与

$（document.ready

结合使用也会导致问题

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

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

---

这里发生了两件事

有两个脚本源可以使用

(一)

Load语句如下所示：

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

(二)

Load语句如下所示，请注意辅助名称空间图表

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

（loader.js），现在是首选方法

正如本文所演示的，将setOnLoadCallback与$（document.ready）结合使用也会导致问题

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

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

---

Amcharts的简单使用

https://www.amcharts.com/demos/

谷歌本身的文档：嗨，克里斯，我把所有脚本内容都放在$（document）.ready（function（）{…}仍然无法工作，我收到了相同的错误您是否100%确定正在加载Google API？检查Dev Tools>sources请用哪一行抛出错误更新您的问题。