GoogleChart不适用于MVC [英] GoogleChart not working in MVC

问题描述

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

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

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

我有这个PartialView：

 < script type =text / javascriptsrc =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，
成功：函数（数据）{
 chartData = data。 d; 
}，
 error：function（）{
 alert（加载数据时出错！请重试。）; 
} 
}）。done function（）{
 google.setOnLoadCallback（drawVisualization）; 
 drawVisualization（）; 
}）; 
 
 
 
函数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_divstyle =width：900px; height：500px;>< / div> 
  

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

Uncaught ReferenceError：google未定义

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

编辑
我的项目结构是：_Layout> MainPage>带图表的PartialView

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

解决方案

有几件事情在这里发生。

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

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

/ p>

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

加载语句如下所示...

  google.setOnLoadCallback（drawVisualization）; 
  

<2> https://www.gstatic.com/charts/loader.js

加载语句看起来像这样，注意辅助命名空间图表 ...

  google.charts.load 'current'，{'packages'：['corechart']}）; 
 google.charts.setOnLoadCallback（drawVisualization）; 
  

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

也是

正如这个SO帖子，使用 setOnLoadCallback 与 $（文档）.ready 也会导致问题。

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

  $（document）.ready（function（）{
 google.charts.load（'current'，{ 
'packages'：['corechart']，
'callback'：drawVisualization 
}）; 
}）; 
  

I want to create a Google chart with data from database.

I have an action which return a Json data, like this:

[{"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}]

and I have this 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>

When I try to open this partial view I get this error message:

Uncaught ReferenceError: google is not defined

Can you help me make this chart?

Edit My project structure is: _Layout > MainPage > PartialView with chart

the error is pointing me to MainPage - line 6 (when I click it, It show me the line 6 of the _layout - " <meta charset="UTF-8" />"

解决方案

There are a couple things going on here.

First, the code posted in the question is mixing versions of Google Charts.

There are two script sources that can be used...

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

Load statements looks like this...

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

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

Load statement looks like this, notice the secondary namespace charts...

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

The latter, loader.js, is now the preferred method.

ALSO

As demonstrated in this SO post, using setOnLoadCallback in combination with $(document).ready can also cause issues.

To avoid, the callback function can be referenced directly within the load statement.

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

这篇关于GoogleChart不适用于MVC的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！