Question

我正在尝试将谷歌图表从局部视图调用到视图，但图表未加载。它在视图中工作正常，但是当转换为局部视图时，它不会渲染。如果有任何问题，请检查并帮助我。

我的观点

@model HeathAppDesign.Model.ChartModel
@{
    ViewBag.Title = "Index";
}
<h2>
    Index</h2>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<script type="text/javascript">
    $(document).ready(function () {
        $('#ChartTypes').change(function () {


            var selectedID = $(this).val();
            $.ajax({
                url: '/charts/GetChart/4',
                type: 'GET',
                success: function (result) {
                    debugger;
                    var res = JSON.stringify(result);
                    $('#div-Graph').append(res);
                    alert($('#div-Graph').html());
                }
            });

        });
    });
</script>
<div>


    <select id="ChartTypes">
        <option id="Chart1" value="0">Projected Annual Cost per Member</option>
        <option id="Chart2" value="1">Projected Annual Cost to Employer by Plan</option>
        <option id="Chart3" value="2">Total Projected Cost</option>
        <option id="Chart4" value="3">Renewal Year PMPM Cost</option>
        <option id="Chart5" value="4">Paid Or Allowed Ratio by Plan</option>
        <option id="Chart6" value="5">Impact of Plan Design Changes on 2017 Costs</option>
        <option id="Chart7" value="6">5 Year Projected Plan Change Impact</option>
        <option id="Chart8" value="7">Impact of Trend Over Time</option>
    </select>
    <div id="div-Graph">

    </div>
</div>

我的PartialView

@model IEnumerable<HeathAppDesign.Model.ChartModel>


<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] }); 


</script>
<script type="text/javascript">
    $(function () {

        chartsdata = '@Model'
        alert(chartsdata);
        google.charts.load('current', { 'packages': ['bar'] });
        google.charts.setOnLoadCallback(drawStuff);

        function drawStuff() {
            var data = new google.visualization.DataTable();

            data.addColumn('string', '');
            data.addColumn('number', '');

            for (var i = 0; i < chartsdata.length; i++) {
                data.addRow([chartsdata[i].XCoordinates, chartsdata[i].YCoordinates]);
            }

            var options = {
                title: 'Paid/Allowed Ratio by Plan',
                width: 500,
                legend: { position: 'none' },
                trendlines: { 0: {} },
                bars: 'vertical', // Required for Material Bar Charts
                vAxis: { viewWindow: { min: 90, max: 100 }, gridlines: { count: 11} },

                bar: { groupWidth: "20%" }
            };

            var chart = new google.charts.Bar(document.getElementById('chartdiv'));
            chart.draw(data, options);
        };


    });

</script>
<h2>
    Chart5</h2>
<div id="chartdiv" style="width: 600px; height: 350px; margin: 0 auto;">
</div>

我的ActionMethod

 [HttpGet]
        public ActionResult GetChart(int id)
        {
            return PartialView("_PaidOrAllowedRatio",
                      objChartService.GetChartCoordinates(ChartTypes.PaidOrAllowedRatioByPlan));
        }

我的结果是这样的

“\ r \ n \ r \ n \ r \ n Chart5

\ r \ n \ r \ n \ r \ n” 设计表区域

我在同一视图中有多个图表，这就是使用局部视图的原因。

有人请帮忙吗？

Answer 1

我发现您的代码存在一些问题

第1期

在局部视图中，此行

var chartsdata = '@Model';

当razor执行此代码时，它会生成如下代码（如果检查生成页面的查看源，则可以看到此内容。（查看ajax调用的响应选项卡））

var chartsdata = 'System.Collections.Generic.List`1[YourNamespace.ChartModel]';

这是字符串。所以基本上在你下面的for循环中，你循环直到这个字符串的长度，这显然是错误的！您的模型是ChartModel的集合。因此，您应该设置与此chartdata变量相同的集合/数组，您可以稍后循环并使用它来添加图形数据。

您可以将JsonConvert.SerializeObject与Html.Raw一起使用，将模型对象转换为javascript数组。

var chartsdata = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model));

这会将一个数组（ChartModel个对象（js版本））存储到chartsdata变量。

现在你的循环代码很好

for (var i = 0; i < chartsdata.length; i++) {
   data.addRow([chartsdata[i].XCoordinates, chartsdata[i].YCoordinates]);
}

第2期

接下来的问题是，当你得到ajax调用响应时，你使用了一个错误的变量来更新DOM。

success: function (result) {                  
                $('#div-Graph').append(res);   // WHAT IS "res" ?????                  
            }

修复很简单

success: function (result) {                  
                $('#div-Graph').append(result);                   
            }

修复这些问题后，假设页面中没有任何其他js错误，图表将出现在SELECT元素更改事件中。

Answer 2

最后我找到了答案，真的花了很多时间来解决这个问题。我从部分视图中将所有脚本引用移动到我的视图文件，然后在视图中调用google.load

即，

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

所以我的观点变得如下

@model HeathAppDesign.Model.ChartModel
@{
    ViewBag.Title = "Index";
}
<h2>Index</h2>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>


<script type="text/javascript">
    **google.load("visualization", "1", { packages: ["corechart"] });** 

    $(document).ready(function () {
        $('#ChartTypes').change(function () {
            var selectedID = $(this).val();
            $.ajax({
                url: '/charts/GetChart/',
                data: {id:4},
                type: 'GET',
                success: function (result) {

                    $('#div-Graph').append(result);

                }
            });

        });
    });
</script>
<div>


    <select id="ChartTypes">
        <option id="Chart1" value="0">Projected Annual Cost per Member</option>
        <option id="Chart2" value="1">Projected Annual Cost to Employer by Plan</option>
        <option id="Chart3" value="2">Total Projected Cost</option>
        <option id="Chart4" value="3">Renewal Year PMPM Cost</option>
        <option id="Chart5" value="4">Paid Or Allowed Ratio by Plan</option>
        <option id="Chart6" value="5">Impact of Plan Design Changes on 2017 Costs</option>
        <option id="Chart7" value="6">5 Year Projected Plan Change Impact</option>
        <option id="Chart8" value="7">Impact of Trend Over Time</option>
    </select>
    <div id="div-Graph">

    </div>
</div>
<div>
    Design table Area
</div>

感谢大家的时间！

在mvc中从部分视图调用谷歌图表

2 个答案:

第1期

第2期