Question

我有一个angularjs应用程序，我使用highcharts-ng来显示一些图形。我从http请求中获取了数据，然后修改了数据以在图中显示它们。如果我仅接收到一些数据，就可以，但是可以正常工作，但是当我接收到很多数据时，highcharts组件将花费很长时间来显示数据。而此时浏览器处于冻结状态。

在我的控制器中，我有：

widgetCtrl.chartDataLine = {
    chart: {
        type: 'spline',
        zoomType: 'xy'
    },
    title: {
        text: 'Power Consumption'
    },
    xAxis: {
        type: 'datetime',
        title: {
            text: 'Date time'
        }
    },
    yAxis: {
        title: {
            text: 'Power (W)'
        },
        min: 0
    },
    options: {
        exporting: {
            enabled: true,
            allowHTML: true,
            buttons: {
                contextButton: {
                    menuItems: null,
                    onclick: function () {
                        this.exportChart();
                    }
                }
            }
        }
    },

    plotOptions:{
        series:{
            turboThreshold:60000 // larger threshold or set to 0 to disable
        }
    },

    series: []
};

我这样称呼数据：

var getMetrics = function (searchText) {
    var param = {
        target: searchText
    };
    xcsDatasource.get('beo').callAction('getPowerMetrics', param.target, widgetCtrl.pickerFrom.date, widgetCtrl.pickerTo.date).then(
        function (result) {
            widgetCtrl.metrics = result;
            widgetCtrl.metricsAsString = JSON.stringify(result);
            var t = getChartData(result);


            widgetCtrl.chartDataLine.series = angular.copy(t);
            console.log(widgetCtrl.chartDataLine);
            //widgetCtrl.chartDataArea.series = getChartData(result);

        },
        function () {
            widgetCtrl.metrics = {};
            widgetCtrl.metricsAsString = '';
        }
    );
};

这是我的html：

<div ng-if="config.linechart" class="graph-container col-sm-12">
    <highchart id="chart1" config="pwrDashboardViewCtrl.chartDataLine"></highchart>
</div>

您是否知道如何在不冻结浏览器的情况下继续加载grapph？

在angularjs中显示包含大量数据的highcharts图

0 个答案: