如果使用 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 则消息应显示没有可用数据 或显示空饼图

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

How to display "No Data" message in the middle of chart area in column chart

Google Charts - No data available - Able to display a blank chart?

JavaScript 调试器图片

Answer 1

如果没有数据，您可以从 WebMethod 返回null

if (dt.Rows.Count > 0)
{
    //rest of code
}
else
{
    return null;
}

然后在success: function (r)顶部的drawChart函数中检查null

function drawChart() {
    $.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');       

            //rest of javascript code

Answer 2

您放置的答案对应于 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);

}

参考资料： how to change the text 'no data' in google pie chart