Question

我在使用数据库中的数据绘制谷歌图表时遇到问题。所以基本上我从谷歌复制/粘贴图表的代码。使用如下所示的静态数据：

<script type="text/javascript">
    google.charts.load("current", { packages: ["corechart"] });
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
        data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');

        data.addRows([

          ['Onions', 1],
          ['Olives', 1],
          ['Zucchini', 1],
          ['Pepperoni', 2],

        ]);

        var options = {
            title: 'Ukupna zarada: @ViewBag.Zarada KM',
            pieHole: 0.4,
        };

        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);
    }
</script>

这很有效，现在我想用我的数据填充图表，所以我不想要硬编码['Onions'，1]等。我使用2个ViewBag从控制器发送数据，一个带字符串数据的ViewBag，以及另一个有数字。我尝试使用此代码至少从databese获取字符串数据。但后来我在屏幕上显示“没有数据”

 data.addRows([
            @{
                 foreach (var item in ViewBag.LTU)
                 {
                     Html.Raw("['"+item+"', 1],");
                 } 
                }                  
        ]);

甚至可能吗？我用硬编码的字符串尝试了这个事件，但是我没有得到任何数据。

 data.addRows([
                @{
                     foreach (var item in ViewBag.LTU)
                     {
                         Html.Raw("['something', 1],");
                     } 
                    }                  
            ]);

Answer 1

我假设您的array中有viewbag字符串和数字数据。

现在您需要将这些C#数组转换为Js数组。

所以我使用Json.Encode进行转换。

var stringData = @Html.Raw(Json.Encode(ViewBag.mystringDataArray));
var numberData = @Html.Raw(Json.Encode(ViewBag.mynumberDataArray));

现在您可以运行每个循环来填充数据行。

$.each(stringData, function(startIndex, stringVal){
            data.addRow([stringVal , numberData[startIndex]]);
        });

Answer 2

感谢所有人的帮助，但是我的朋友在代码工作后解决了这个问题：

 var d1 = [
        @{

            for (var i = 0; i < @LTU.Count; i++)
            { 
                 @Html.Raw("['"+LTU[i]+"', "+Cijene[i]+"] ,")
            }

        }
        ];

        for(var i=0;i<@LTU.Count;i++)
        {
            data.addRows([
                d1[i]
            ]);
        }

带有数据库数据的Google图表

2 个答案: