highstock图表 - 日期范围按钮

在我的应用程序中我使用角度Highstock图表。我有很多数据（数百万），现在我想把现有的按钮设置为日期范围（1周，1个月，3个月，1年，全部），还可以点击任何按钮发送新的请求到服务器不累积数据。例如，如果按下按钮“一周”，只有服务器检索一周的数据，如果你点击一个按钮到一个月，以获取一个月的数据。我不想调用不必要的数据，并且服务器速度变慢，如果我要查找一个月的数据，服务器会将所有数据返回给我。这是代码。在此先感谢highstock图表 - 日期范围按钮

> https://jsfiddle.net/tf7pr1ft/

来源

2016-09-27 Arter

您是否已经查看延迟加载Highcharts示例？ http://www.highcharts.com/news/48-loading-millions-of-points-in-highcharts –

嗯......很好......我从来没有看到这个例子。 thnx我会尝试 – Arter

Thnx to @GrzegorzBlachlińskii fix this。这里是代码

$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年和ALL。我设置了默认范围，当打开应用程序时，在1个月，这里是问题。另一个范围的按钮被禁用，因为我只从URL获取数据只有一个月。我想启用所有按钮来选择任何范围。 Thnx

来源

2016-09-28 13:35:03 Arter

highstock图表 - 日期范围按钮

回答

相关问题