遍历数据库中的数据后,Highchart数据未显示

时间:2019-05-06 06:24:27

标签: javascript c# jquery

我正在尝试从数据库获取数据并将其动态显示在highchart系列数据上。为此,我使用以下代码:

$(function () {
                $.ajax({
                    url: "/WebApi/MIPResource_DistrictWise",
                    cache: false,
                    success: function (data) {
                        var categories ;
                        var i;
                        for (i = 0; i < data.length; i++) {
                            categories += data[i].DISTRICT_NAME;

                        }
                        alert(categories);

                        // var xx = [][][];
                        // var data = "";
                        // var i;
                        // for (i = 0; i < xx.length; i++) {
                        // data += xx[i];
                        // }

                        Highcharts.chart('MIPDistrictWise', {
                            chart: {
                                type: 'bar'
                            },
                            title: {
                                text: 'MIP Resource Requirement <br> (District Wise)'
                            },
                            xAxis: {
                                categories: categories
                            },
                            yAxis: {
                                min: 0,
                                title: {
                                    text: 'Total Resources Required'
                                }
                            },
                            legend: {
                                reversed: true
                            },

                            plotOptions: {
                                series: {
                                    stacking: 'percent',
                                    borderWidth: 1,
                                    groupPadding: 0,//add here
                                    pointPadding: 0//add here

                                },
                                bar: {
                                    allowPointSelect: true,
                                    cursor: 'pointer',
                                    dataLabels: {
                                        enabled: true,
                                        format: '<b>{point.name}</b><br>{point.percentage:.1f} %',
                                        color: 'white'

                                    }
                                }
                            },
                            series: [{
                                name: 'TVET',
                                data: [5, 3, 4, 7, 2, 4, 7, 2]
                            }, {
                                name: 'IGGs',
                                data: [2, 2, 3, 2, 1, 4, 7, 2]
                            }, {
                                name: 'CIF',
                                data: [3, 4, 4, 2, 5, 4, 7, 2]
                            }]
                        });

                    }

                });
            });

在“警报”中,它正确显示了区域名称,但是在它们的开头有一个附加的关键字“ undefined”,在控制台面板中还显示了以下错误:Uncaught TypeError:无法读取属性'parts / Globals .js'为undefined。我想从数据库中动态显示类别名称。

1 个答案:

答案 0 :(得分:0)

您需要检查循环

                        for (i = 0; i < data.length; i++) {
                        categories += data[i].DISTRICT_NAME;// Here some of the string output are undefined

                    }

所以您可能需要检查

  

数据[i] .DISTRICT_NAME

是未定义的,或者不在循环内。我在下面的链接中附加了如何检查undefined的链接。

JS: How to check if a variable is NOT undefined