Highcharts highstock图表-日期范围按钮
在我的应用程序中，我使用角度高点作为图表。我有很多数据（数百万），现在我想把现有的按钮用于设置日期范围（1周、1个月、3个月、1年，全部），但也可以单击任何按钮向服务器发送一个新的请求，以不累积数据。例如，如果按“一周”按钮，则只有服务器检索一周的数据，如果单击按钮检索一个月的数据，则获取一个月的数据。我不想调用不必要的数据，如果我要查找一个月的数据，服务器会将所有数据返回给我，那么服务器会变慢。这是代码。提前谢谢Highcharts highstock图表-日期范围按钮,highcharts,highstock,Highcharts,Highstock,在我的应用程序中，我使用角度高点作为图表。我有很多数据（数百万），现在我想把现有的按钮用于设置日期范围（1周、1个月、3个月、1年，全部），但也可以单击任何按钮向服务器发送一个新的请求，以不累积数据。例如，如果按“一周”按钮，则只有服务器检索一周的数据，如果单击按钮检索一个月的数据，则获取一个月的数据。我不想调用不必要的数据，如果我要查找一个月的数据，服务器会将所有数据返回给我，那么服务器会变慢。这是代码。提前谢谢 > https://jsfiddle.net/tf7pr1ft/ 到@G
> https://jsfiddle.net/tf7pr1ft/
到@Grzegorz blachlinski，我来解决这个问题。这是代码
$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();
}
});
};
getDateRange=函数（e）{
var date1=新日期（e.min）；
var date2=新日期（e.max）；
var timeDiff=Math.abs（date2.getTime（）-date1.getTime（））；
var diffDays=数学单元（timeDiff/（1000*3600*24））；
$http.get（serviceBase++'aaaaa/aaaaaa/'+$stateParams.klupaID++'/aaaaaaaa？days='+diffDays，函数（数据）{
//ukoliko buden dodavat joškoji config obavezno dodat broj koliko ih ima na iThnx to@Grzegorz Blachlinski i我修复了这个问题。下面是代码
$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();
}
});
};
getDateRange=函数（e）{
var date1=新日期（e.min）；
var date2=新日期（e.max）；
var timeDiff=Math.abs（date2.getTime（）-date1.getTime（））；
var diffDays=数学单元（timeDiff/（1000*3600*24））；
$http.get（serviceBase++'aaaaa/aaaaaa/'+$stateParams.klupaID++'/aaaaaaaa？days='+diffDays，函数（数据）{
//ukoliko buden dodavat joškoji config obavezno dodat broj koliko ih ima na I您是否已经查看了惰性加载Highcharts示例？嗯…很好..我从未见过此示例。我将尝试您是否已经查看了惰性加载Highcharts示例？嗯…很好..我从未见过此示例。我将尝试