highstock charts - 날짜 범위의 버튼

Question

내 응용 프로그램에서 차트 용 각형 Highstock을 사용합니다. 나는 많은 데이터 (수백만)를 가지고 있고, 이제는 설정 기간 (1 주, 1 개월, 3 개월, 1 년)에 대한 기존 버튼을 넣고 싶습니다. 또한 버튼을 클릭하여 새로운 요청을 보내고 싶습니다. 데이터를 누적하지 않도록 서버에 연결하십시오. 예를 들어, "일주일"버튼을 누르면 서버가 한 달 동안 버튼을 클릭하면 한 달 동안 데이터를 가져와 일주일 동안 데이터를 검색합니다. 불필요한 데이터를 호출하고 싶지 않고 한 달 동안 데이터를 찾고 있다면 서버가 느려지고 서버가 모든 데이터를 다시받습니다. 여기에 코드가 있습니다. 미리 감사드립니다.

> https://jsfiddle.net/tf7pr1ft/ 

Answer 1

@Grzegorz Blachliń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개월, 일년 및 ALL을 갖고 싶어, 또 다른 문제가있다. 1 달에 기본 앱을 열 때 기본 범위를 설정하고 여기에 문제가 있습니다. 다른 범위의 버튼은 사용할 수 없으며 URL에서 1 달 동안 만 데이터를 가져옵니다. 모든 범위를 선택하기 위해 모든 버튼을 활성화하고 싶습니다. Thnx