在 Highcharts 中选择缩放范围时获取 x 轴范围
Get the x axis range on selecting a zoom range in Highcharts
我在 Highcharts 中有一个条形图和一个样条图。图表上启用了缩放选项,因此当我 select 特定区域时它会放大。是否可以获取缩放后 selected 区域的 x 轴值?例如,如果 x 轴的日期从 01-01-2015
到 30-01-2015
并且我 select 从 01-01-2015
到 15-01-2015
的范围被缩放,它给了我1 到 15.3(基本上是根据列的长度转换 x 轴)而不是 01-01-2015
到 15-01-2015
.
$(function () {
$('#container').highcharts({
chart: {
events: {
selection: function (event) {
var text, label;
if (event.xAxis) {
text = 'min: ' + Highcharts.numberFormat(event.xAxis[0].min, 2) + ', max: ' + Highcharts.numberFormat(event.xAxis[0].max, 2);
} else {
text = 'Selection reset';
}
label = this.renderer.label(text, 100, 120)
.attr({
fill: Highcharts.getOptions().colors[0],
padding: 10,
r: 5,
zIndex: 8
})
.css({
color: '#FFFFFF'
})
.add();
setTimeout(function () {
label.fadeOut();
}, 3000);
}
},
zoomType: 'x'
},
title: {
text: '',
style: {
color: '#cc0000',
fontWeight: 'bold'
}
},
xAxis: {
categories: [{{{xaxisLabel}}}],
crosshair: true
},
yAxis: [{ /* Primary yAxis */
labels: {
format: '{value}%',
style: {
color: '#cc0000'
}
},
title: {
text: 'Failure Percentage',
style: {
color: '#cc0000'
}
}
}, { /* Secondary yAxis */
title: {
text: 'Success Percentage',
style: {
color: '#009900'
}
},
max: 100,
labels: {
format: '{value} %',
style: {
color: '#009900'
}
},
opposite: true
}],
labels: {
items: [{
html: '',
style: {
left: '2px',
top: '18px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}]
},
credits: {
enabled: false
},
series: [{
type: 'column',
name: 'Success',
color: '#7deda2',
yAxis: 1,
tooltip: {
pointFormatter: function(){
return "Success: " + this.y + "%" + "<br />" + "Success docs: " + toolTipSuccess[this.series.data.indexOf( this )] + "<br />";
}
},
data: [{{barSuccess}}]
}, {
type: 'spline',
name: 'Failure',
tooltip: {
pointFormatter: function(){
return "Failure: " + this.y + "%" + "<br />" + "Failure docs: " + toolTipFailure[this.series.data.indexOf( this )] + "<br />";
}
},
data: [{{barFailure}}],
marker: {
lineWidth: 3,
lineColor: Highcharts.getOptions().colors[8],
fillColor: 'red'
}
}]
});
});
提前致谢
您可以使用 event.xAxis[0].min 和 event.xAxis[0].max 作为索引。
因此,假设您的 xaxis 类别数组称为 xaxis_array,您可以使用 xaxis_array[event.xAxis[0].min 之类的内容来访问其值]并得到你需要的原始值。
希望对您有所帮助
我在 Highcharts 中有一个条形图和一个样条图。图表上启用了缩放选项,因此当我 select 特定区域时它会放大。是否可以获取缩放后 selected 区域的 x 轴值?例如,如果 x 轴的日期从 01-01-2015
到 30-01-2015
并且我 select 从 01-01-2015
到 15-01-2015
的范围被缩放,它给了我1 到 15.3(基本上是根据列的长度转换 x 轴)而不是 01-01-2015
到 15-01-2015
.
$(function () {
$('#container').highcharts({
chart: {
events: {
selection: function (event) {
var text, label;
if (event.xAxis) {
text = 'min: ' + Highcharts.numberFormat(event.xAxis[0].min, 2) + ', max: ' + Highcharts.numberFormat(event.xAxis[0].max, 2);
} else {
text = 'Selection reset';
}
label = this.renderer.label(text, 100, 120)
.attr({
fill: Highcharts.getOptions().colors[0],
padding: 10,
r: 5,
zIndex: 8
})
.css({
color: '#FFFFFF'
})
.add();
setTimeout(function () {
label.fadeOut();
}, 3000);
}
},
zoomType: 'x'
},
title: {
text: '',
style: {
color: '#cc0000',
fontWeight: 'bold'
}
},
xAxis: {
categories: [{{{xaxisLabel}}}],
crosshair: true
},
yAxis: [{ /* Primary yAxis */
labels: {
format: '{value}%',
style: {
color: '#cc0000'
}
},
title: {
text: 'Failure Percentage',
style: {
color: '#cc0000'
}
}
}, { /* Secondary yAxis */
title: {
text: 'Success Percentage',
style: {
color: '#009900'
}
},
max: 100,
labels: {
format: '{value} %',
style: {
color: '#009900'
}
},
opposite: true
}],
labels: {
items: [{
html: '',
style: {
left: '2px',
top: '18px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}]
},
credits: {
enabled: false
},
series: [{
type: 'column',
name: 'Success',
color: '#7deda2',
yAxis: 1,
tooltip: {
pointFormatter: function(){
return "Success: " + this.y + "%" + "<br />" + "Success docs: " + toolTipSuccess[this.series.data.indexOf( this )] + "<br />";
}
},
data: [{{barSuccess}}]
}, {
type: 'spline',
name: 'Failure',
tooltip: {
pointFormatter: function(){
return "Failure: " + this.y + "%" + "<br />" + "Failure docs: " + toolTipFailure[this.series.data.indexOf( this )] + "<br />";
}
},
data: [{{barFailure}}],
marker: {
lineWidth: 3,
lineColor: Highcharts.getOptions().colors[8],
fillColor: 'red'
}
}]
});
});
提前致谢
您可以使用 event.xAxis[0].min 和 event.xAxis[0].max 作为索引。
因此,假设您的 xaxis 类别数组称为 xaxis_array,您可以使用 xaxis_array[event.xAxis[0].min 之类的内容来访问其值]并得到你需要的原始值。
希望对您有所帮助