Question

在我的应用程序中，我使用angular Highstock作为图表。我有很多数据（数百万），现在我想把现有按钮设置为设定日期范围（1周，1个月，3个月，1年，全部），还要点击任何按钮发送新请求到服务器不累积数据。例如，如果按下按钮＆＃34;一周＆＃34;，只有服务器检索一周的数据，如果单击一个月的按钮，则获取一个月的数据。我不想调用不必要的数据，如果我要查找一个月的数据，服务器会慢下来，服务器会回复给我所有数据。这是代码。提前致谢

> https://jsfiddle.net/tf7pr1ft/

Answer 1

Thnx to@GrzegorzBlachliński我解决了这个问题。这是代码

 $scope.chartConfig1 = {


            xAxis: {
                ordinal: false,
                //za dodat date range postavit events i range selectors
                events : {
                afterSetExtremes: getDateRange //here i add my custom function
            }

            },
            yAxis: {
                plotLines: [{
                        color: '#FF0000',
                        width: 1,
                        value: 11.50,
                        label: {text: '11.50'}
                    }]

            },
            options: {
                chart: {
                    zoomType: 'x',
                    backgroundColor: 'rgba(255, 255, 255, 1)',
                    polar: true,
                    type: 'line',
                    borderRadius: 5

                },
                legend: {
                    enabled: true
                },
                rangeSelector: { 
            selected : 0, //here i defined default range 
             enabled: true,
                    inputStyle: {
            color: 'black'
        }
                },
                navigator: {
                    enabled: true
                }
            },
            series: [],
            title: {
                text: 'Solar and Battery voltage average'
            },
            useHighStocks: true
        },
        $scope.chartConfig1.series.push({
            id: 1,
            name: "Solar voltage average",
            data: $scope.data[0],
            tooltip: {
                valueDecimals: 2
            }
        },   {
            id: 2,
            name: "Battery voltage average",
            data: $scope.data[1],
            tooltip: {
                valueDecimals: 2
            }
        }
        );

这是我的自定义功能

getDateRange = function (e) {
                        var date1 = new Date(e.min);
                        var date2 = new Date(e.max);
                        var timeDiff = Math.abs(date2.getTime() - date1.getTime());
                        var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));

                      $http.get(serviceBase + 'aaaaa/aaaaaa/' + $stateParams.klupaID + '/aaaaaaa?days=' + diffDays, function(data){
                  //ukoliko buden dodavat još koji config obavezno dodat broj koliko ih ima na i<=8
                  for (i=1; i<=8; i++){
                      $scope.chartConfigString = 'chartConfig' + i;
                     $scope.chartConfigString.series[0].setData(data);
                  $scope.chartConfigString.hideLoading(); 

                  }
                });
           };

现在我有另外一个问题，我想有四个选择器（按钮），1个月，3个月，1年和所有。我在1个月打开应用程序时设置默认范围，这里有问题。另一个范围的按钮被禁用，因为我只从网址获取数据一个月。我想启用所有按钮以选择任何范围。日Thnx

highstock图表 - 日期范围按钮

1 个答案: