具有动态数据的高图表 $http.post 角度 js

Highcharts with dynamic data $http.post angular js

本文关键字:http post 角度 js 高图表 动态 数据      更新时间:2023-09-26
$http.post(galileoServer + "actions.php", {
        "action": "get-attendance-graph",
        "user": window.localStorage.getItem("username")
    }).success(function(result){
        //console.log(result)
        busyIndicator("hide");
        $('#attendance-graph').highcharts({
            credits: 0,
            tooltip:{
                enabled: false
            },
            chart: {
                type: 'bar'
            },
            title: {
                text: '',
                style: {
                    display: "none"
                }
            },
            xAxis: {
                categories: ['June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar', 'Apr', 'May']
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'No. of days'
                },
                gridLineWidth: 0,
                minorGridLineWidth: 0,
                labels: {   //to disable points displayed
                    enabled: false
                }
            },
            legend: {
                reversed: true
            },
            plotOptions: {
                series: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true,
                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                        formatter: function() { //function to avoid displaying zero values
                            if (this.y != 0) {
                                return this.y;
                            } else {
                                return null;
                            }
                        }
                        /*style: {
                         textShadow: '0 0 3px black, 0 0 3px black'
                         }*/
                    }
                }
            },
            series: [{
                name: 'Absent',
                data: [result.absentData]
            }, {
                name: 'Present',
                data: [result.presentData]
            }]
        });

    }).error(function(result, status){
        alert(status + "'nCouldn't connect to Galileo server due to network problem")
    });

我正在尝试通过 ajax 加载数据,但图形未加载,加载的图形为空。提供了编码片段。我也尝试了getJSON部分,但它也没有奏效。请让我知道解决方案,因为自最近两天以来我无法获得图表。

控制台输出{"absentData":"0,0,2,0,0,1,0,0,0,0,0,0","presentData":"30,31,29,30,31,29,31,31,28,31,30,31"}

您的 json 未正确用于 Highcharts。 你想要一个数字数组,你给它的是一个元素的数组一个字符串:

data: ["0,0,2,0,0,1,0,0,0,0,0,0"] // an array of a single string...

最好在PHP代码中修复此问题。 您需要构建一个 php 整数数组(不要构建串联字符串),然后使用 json_encode .

如果你无法在 PHP 中修复它,你可以执行以下操作:

data: $.parseJSON("["+result.absentData+"]")

但这有点丑陋。