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圖表 - 日期範圍按鈕

回答

相關問題