c# - 如果使用 asp.net 网络表单的数据为零，则显示消息（没有可用数据）或谷歌饼图的空图

Question

如果使用 asp.net 网络表单的数据为零，则显示消息（没有可用数据）或谷歌饼图的空图

下面是我的脚本

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load('current', { packages: ['corechart'] });
</script>

<script type="text/javascript">

    $(document).ready(function () {

        // Load the Visualization API and the corechart package.
        google.charts.load('current', { 'packages': ['corechart'] });
        // Set a callback to run when the Google Visualization API is loaded.
        google.charts.setOnLoadCallback(drawChart);
        // Callback that creates and populates a data table,
        // instantiates the pie chart, passes in the data and
        // draws it.
        function drawChart() {
            // Create the data table.
            $.ajax({
                type: "POST",
                url: "add_claim.aspx/Fillgraph",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {


                    if (r.d === null) {
                        document.getElementById('piechart').innerHTML = 'No data found.';
                        return;
                    }

                    var chartdata = new google.visualization.DataTable();
                    chartdata.addColumn('string', 'Topping');
                    chartdata.addColumn('number', 'Slices');

                    chartdata.addRows(r.d);


                    // Set chart options
                    var options = {
                        pieHole: 0.6,
                        legend: { position: 'bottom' },
                        width: '100%',
                        height: '100%',
                        pieSliceText: 'percentage',
                        colors: ['#1e93c6', '#d6563c', '#c79f49', '#ff9a00'],

                        chartArea: {
                            left: "3%",
                            top: "5%%",
                            height: "95%",
                            width: "94%"
                        }
                    };


                    var chart = new google.visualization.PieChart(document.getElementById('piechart'));
                    chart.draw(chartdata, options);


                },


                failure: function (r) {
                   // alert(r.d);
                },
                error: function (r) {
                  //  alert(r.d);
                }
            });
        }

    })
</script>

下面是我在 C# 后面的代码

[WebMethod]
public static List<object> Fillgraph()
{
    BusinessLogic bl = new BusinessLogic();
    BusinessObject bo = new BusinessObject();
    List<object> chartData = new List<object>();

    bo.Para1 = "1";//@ParaValues

    bo.Para2 = System.Web.HttpContext.Current.Session["UserId"].ToString();//@username
    bo.Para3 = System.Web.HttpContext.Current.Session["UniqueID"].ToString();//@username

    DataTable dt = bl.ACS_Get_Graphs(bo);

    if (dt.Rows.Count > 0)
    {
        if (dt.Rows[0]["Food"].ToString() != "")
        {
            chartData.Add(new object[] { "Food", Convert.ToInt32(dt.Rows[0]["Food"].ToString()) });
        }
        else
        {
            chartData.Add(new object[] { "Food", 0 });
        }
        if (dt.Rows[0]["LocalConveyance"].ToString() != "")
        {
            chartData.Add(new object[] { "Local conveyance", Convert.ToInt32(dt.Rows[0]["LocalConveyance"].ToString()) });
        }
        else
        {
            chartData.Add(new object[] { "Local conveyance", 0 });
        }
        if (dt.Rows[0]["Lodging"].ToString() != "")
        {
            chartData.Add(new object[] { "Lodging", Convert.ToInt32(dt.Rows[0]["Lodging"].ToString()) });
        }
        else
        {
            chartData.Add(new object[] { "Lodging", 0 });
        }
        if (dt.Rows[0]["MisExpences"].ToString() != "")
        {
            chartData.Add(new object[] { "Misc. Expences", Convert.ToInt32(dt.Rows[0]["MisExpences"].ToString()) });
        }
        else
        {
            chartData.Add(new object[] { "Misc. Expences", 0 });
        }

        if (dt.Rows[0]["Travelling"].ToString() != "")
        {
            chartData.Add(new object[] { "Travelling", Convert.ToInt32(dt.Rows[0]["Travelling"].ToString()) });
        }
        else
        {
            chartData.Add(new object[] { "Travelling", 0 });
        }

     return chartData;
    }
    else
    {
          return null;
    }


}

如果本地运输=0，住宿=0，杂项。Expences=0 和 Travelling=0 则消息应显示没有可用数据或显示空饼图

我尝试了下面的示例但无法获得

如何在柱形图中的图表区域中间显示“无数据”消息

谷歌图表 - 没有可用数据 - 能够显示空白图表？

JavaScript 调试器图像

标签： c#asp.netwebforms

Answer 1

您放置的答案对应于 LineChart，在您的示例中，您使用的是 PieChart，请尝试替换它：

JS代码：

// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(chartdata, options);

为了这：

JS代码：

if (chartdata.getNumberOfRows() == 0) {

    var d = document.getElementById("piechart");

    d.innerHTML = "<p>Sorry, not info available</p>";

    // Custom style
    d.style.position = "relative";
    d.style.fontSize = "25px";

    d.style.right = "50%";
    d.style.left = "50%";

}
else {

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.PieChart(document.getElementById('piechart'));
    chart.draw(chartdata, options);

}

参考： 如何更改谷歌饼图中的文本“无数据”