Отобразить сообщение (данные недоступны) или пустой график для диаграммы Google p ie, если данные равны нулю с помощью веб-формы asp. net.

Question

Показать сообщение (данные недоступны) или пустой график для Google p ie, если данные равны нулю, используя 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, Mis c. Expences = 0 и Traveling = 0, после чего должно появиться сообщение, что данные отсутствуют, или отображается пустой p ie graph

Я попробовал приведенный ниже пример, но не смог получить

Как отобразить сообщение «Нет данных» в середине области диаграммы на столбчатой ​​диаграмме

Google Charts - Нет данных - возможность отобразить пустой график?

JavaScript Изображение отладчика

Answer 1

Вы можете вернуть null из WebMethod, если данных не было

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

Затем проверить на нулевое значение в функции drawChart в верхней части success: function (r)

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

}

Ссылки: как изменить текст «нет данных 'в Google p ie диаграммы