使用json响应动态更新highcharts

时间:2014-08-11 17:19:16

标签: angularjs highcharts

我正在尝试使用json响应绘制高级图表,但是我可以第一次绘制,但无法使用新数据更新系列

function get_chart(data) {
    //alert('hello..' + data);

        return {
            xAxis: {        
                type: 'datetime',
                labels: {
                    formatter: function() {
                        var monthStr = Highcharts.dateFormat('%b', this.value);
                        var firstLetter = monthStr.substring(0, 1);
                        return firstLetter;
                    }
                }
            },
            title: {
                text: data.measurementName
            },
            chart: {
                height: 300,
                width: 500,
                type: 'column',
                zoomType: 'x'
            },
            credits: {
                enabled: false
            },
            plotOptions: {
                series: {
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function() {
                                console.log ('Category: '+ this.category +', value: '+ this.y);
                            }
                        }
                    }
                }
            },

            series: [{
                    name: 'Hours',
                    data: (function() {
                        var chart = [{key:data.measurementName, values:[]}];

                        var i = 0;
                        if(typeof(data) == 'string')return chart;

                        for(n in data.values){
                            data.values[n].snapshot = new Date(data.values[n].snapshot);
                            data.values[n].value = parseInt(data.values[n].value);
                        }

                        chart[0].values = data.values.map(function(arrayObj){
                            return [arrayObj.value]
                        });

                        return  chart[0].values;
                    })()
                }]
        };
    } 

我正在调用此函数,如

$scope.renderChart = function(measurement){
        $scope.showChart = false;

        restApp.getMeasurementForCompID(comp.id, measurement.id).then(function(data){

            console.log(data);

            $scope.example_chart = get_chart(data);
            console.log($scope.example_chart);

            $scope.showChart = true;
        });

    }

这里的getMeasurementForCompID是从数据库获取数据的另一个函数。 这里有什么问题?任何帮助..

1 个答案:

答案 0 :(得分:1)

我使用了https://github.com/pablojim/highcharts-ng

我只是改变了数据对象,而高图则反映了这一变化。