GoogleChart不在MVC中工作
我想用数据库中的数据创建一个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：
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); }
当我尝试打开这个局部视图时，我收到以下错误消息：
未捕获的ReferenceError：谷歌未定义
你能帮帮我制作这张图表吗？
编辑我的项目结构是：_Layout> MainPage> PartialView with chart
错误指向MainPage – 第6行（当我点击它时，它显示_layout的第6行 – “ ”
这里有几件事情要发生。
首先，问题中发布的代码是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现在是首选方法。
也
如此SOpost所示 ，将setOnLoadCallback与$(document).ready结合使用也会导致问题。
为避免这种情况，可以在load语句中直接引用回调函数。
$(document).ready(function(){ google.charts.load('current', { 'packages': ['corechart'], 'callback': drawVisualization }); });
假设您的嵌入式脚本在加载外部Google API之前正在执行，请尝试通过将脚本包装在…中来延迟执行…
$(document).ready(function() { ... }
或者，如果你不使用jQuery …
document.addEventListener("DOMContentLoaded", function(event) { ... });
这里有两件事。
有两个脚本源可以使用……
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），现在是首选方法。
正如在这篇SOpost中所certificate的那样，将setOnLoadCallback与$（document）.ready结合使用也会导致问题。
可以在load语句中直接引用回调函数。
$(document).ready(function(){ google.charts.load('current', { 'packages': ['corechart'], 'callback': drawVisualization }); });