Google Pie Chart在Asp.Net MVC中的视图页面上无法正确显示 [英] Google Pie Chart not displaying correctly on view page in Asp.Net MVC

问题描述

在我的检视网页上显示我的 Google Pie Chart 似乎有问题。它似乎没有正确显示饼图中的数据，我不完全确定为什么，我尝试改变我的 dataColumn 的代码，但它最终不显示任何东西。所以我恢复了... 查询工作，正确的数据从数据库中提取。

I seem to have a problem with displaying my Google Pie Chart on my view page. It doesn't seem to display the datain the Pie Chart correctly and I'm not entirely sure why, I tried changing around the code for my dataColumn, but it ends up not displaying anything at all. So I reverted back... The query does work, the correct data is being pulled from the database.

我还是新的报告，所以如果有人可以提出一个解决方案，我会非常感谢！

I'm still fairly new to reports so if anyone can please suggest a solution I'll greatly appreciate it!

我已使用 razor语法在视图中完成了所有操作。如果需要任何附加代码，请让我知道。

I've done everything in the view using razor syntax. If any additional code is required please let me know.

查看网页代码：

@using WebMatrix.Data;
@using WebMatrix.WebData;


@{
    var db = Database.Open("HealthContext");

    String rows = "";

    var Query = ("SELECT Hospital.Name,Hospital.Province,Count([Order].OrderID) AS Orders FROM Hospital,[Order] WHERE Hospital.HospitalID = [Order].HospitalID GROUP BY Hospital.Name,Hospital.Province;");

    var AppQuery = db.Query(Query);


    List<string> rowsList = new List<string>();

    foreach (var item in AppQuery)
    {
        rowsList.Add("['" + item.Name + "','" + item.Orders + "']");


    };

    rows = String.Join(", ", rowsList);

}

<h2>PieChart1</h2>


<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);
    function drawChart() {

        var data = new google.visualization.DataTable();

        data.addColumn('string', 'Name');     
        data.addColumn('string', 'Orders');
        data.addRows([
            @Html.Raw(rows)]
        );

        var options = {
            title: 'Orders Per Hospital'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
    }
</script>

报表显示方式：

推荐答案

$ c> @ Html.Raw（rows）产生，这将是很难回答一定。

without seeing the data @Html.Raw(rows) produces, it will be hard to answer for sure.

但是，它看起来像一个 String 正在为订单而不是号。

However, it looks like a String is being for Orders instead of a Number.

我将从改变：

rowsList.Add（['+ item.Name +'，'+ item.Orders + ']）;

至：

rowsList.Add（['+ item.Name +'，+ item.Orders +]）;

和：

    data.addColumn('string', 'Name');     
    data.addColumn('string', 'Orders');
    data.addRows([
        @Html.Raw(rows)]
    );

To：

    data.addColumn('string', 'Name');     
    data.addColumn('number', 'Orders');
    data.addRows([
        @Html.Raw(rows)]
    );

这篇关于Google Pie Chart在Asp.Net MVC中的视图页面上无法正确显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！