Highcharts-ng,过度重新渲染

时间:2015-11-10 12:50:43

标签: angularjs highcharts highcharts-ng

我想知道在为区域图添加点时我应该如何制作更好的动画。在普通的高级图表中,这是非常流畅的,但使用高图表 - 它会重新渲染图表的大部分。

我有两个显示问题的fiddels。 Maby有一种简单的方法可以解决这个问题吗?

Highcharts-NG http://jsfiddle.net/Cp73s/3399/

var myapp = angular.module('myapp', ["highcharts-ng"]);
myapp.controller('myctrl', function ($scope) {

    $scope.addPoints = function () {
        var seriesArray = $scope.highchartsNG.series
        var rndIdx = Math.floor(Math.random() *10+7);
        $scope.highchartsNG.series[0].data.push(rndIdx);

    };  

    $scope.highchartsNG = {
        options: {
            chart: {
                type: 'area'
            },
            plotOptions: {
                area: {
                    fillOpacity: 0.15,
                    dataLabels: {
                        allowOverlap: true,
                        enabled: true,
                        padding: 0,
                        style: {
                            fontSize: '25px'
                        }
                    },
                    enableMouseTracking: true
                }
            },
        },
        series: [{
            data: [10, 15, 12, 8, 7]
        }]
    }

});

常规highcharts http://jsfiddle.net/m8Lavyrc/3/

$(function () {
    $('#container').highcharts({
          chart: {
                type: 'area'
            },
                    plotOptions: {
                area: {
                    fillOpacity: 0.15,
                    dataLabels: {
                        allowOverlap: true,
                        enabled: true,
                        padding: 0,
                        style: {
                            fontSize: '25px'
                        }
                    },
                    enableMouseTracking: true
                }
            },

        series: [{
            data: [10, 15, 12, 8, 7]
        }]

    });


    // the button action
    var i = 0;
    $('#button').click(function () {
        var chart = $('#container').highcharts();
        chart.series[0].addPoint(Math.floor(Math.random() *10+7));        
    });
});

TNX

0 个答案:

没有答案