具有动态数据的Highcharts $ http.post angular js

时间:2014-11-24 13:14:42

标签: javascript jquery angularjs highcharts

$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"}

1 个答案:

答案 0 :(得分:1)

你的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+"]")

但这有点难看。