谷歌图表与来自数据库的数据

本文关键字：数据库 数据 谷歌 | 更新日期: 2023-09-27 18:36:04

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

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

这很好用，现在我想用我的数据填充图表，所以我不想要硬编码 ['洋葱'，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],");
                     } 
                    }                  
            ]);

谷歌图表与来自数据库的数据

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

现在您需要将这些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]]);
        });

感谢大家的帮助，但我的朋友解决了这个问题，以下代码有效：

 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]
            ]);
        }
相关文章：