放大和缩小按钮 - 高图
问题描述:
我在气泡图中有自定义缩放按钮(放大,缩小)。当用户单击放大按钮时,缩放应该在图表中从左到右发生。类似地,缩小应该以这种方式发生,这与缩小立即发生的重置缩放功能相反。放大和缩小按钮 - 高图
小提琴链接:https://jsfiddle.net/abcdlearner/dz4awe0y/ /** * A Highcharts插件在图表的 *边界框以外的单独的容器显示工具提示,以便它可以利用在网页中所有可用空间。 */
(function(H) {
H.wrap(H.Tooltip.prototype, 'getLabel', function(proceed) {
var chart = this.chart,
options = this.options,
chartRenderer = chart.renderer,
box;
if (!this.label) {
this.renderer = new H.Renderer(document.body, 0, 0);
box = this.renderer.boxWrapper;
box.css({
position: 'absolute',
top: '-9999px'
});
chart.renderer = this.renderer;
proceed.call(this, chart, options);
chart.renderer = chartRenderer;
this.label.attr({
x: 0,
y: 0
});
this.label.xSetter = function(value) {
box.element.style.left = value + 'px';
};
this.label.ySetter = function(value) {
box.element.style.top = value + 'px';
};
}
return this.label;
});
H.wrap(H.Tooltip.prototype, 'getPosition', function(proceed, boxWidth, boxHeight, point) {
var chart = this.chart,
chartWidth = chart.chartWidth,
chartHeight = chart.chartHeight,
chartPlotWidth = chart.plotWidth,
chartPlotHeight = chart.plotHeight,
pos;
point.plotX += this.chart.pointer.chartPosition.left;
point.plotY += this.chart.pointer.chartPosition.top;
// Temporary set the chart size to the full document, so that the tooltip positioner picks it up
chart.chartWidth = $(window).width();
chart.plotWidth += chart.chartWidth - chartWidth;
chart.chartHeight = $(document).height();
chart.plotHeight += chart.chartHeight - chartHeight;
var pos = proceed.call(this, boxWidth, boxHeight, point);
chart.chartWidth = chartWidth;
chart.plotWidth = chartPlotWidth;
chart.chartHeight = chartHeight;
chart.plotHeight = chartPlotHeight;
return pos;
});
/**
* Find the new position and perform the move. This override is identical
* to the core function, except the anchorX and anchorY arguments to move().
*/
H.Tooltip.prototype.updatePosition = function(point) {
var chart = this.chart,
label = this.label,
pos = (this.options.positioner || this.getPosition).call(
this,
label.width,
label.height,
point
);
// Set the renderer size dynamically to prevent document size to change
this.renderer.setSize(
label.width + (this.options.borderWidth || 0),
label.height + this.distance,
false
);
// do the move
this.move(
Math.round(pos.x),
Math.round(pos.y || 0), // can be undefined (#3977)
point.plotX + chart.plotLeft - pos.x,
point.plotY + chart.plotTop - pos.y
);
};
}(Highcharts));
$('.container').each(function(i, v) {
$(v).highcharts({
chart: {
type: 'column',
inverted: true,
borderWidth: 1
},
title: {
text: 'Tooltip outside the box'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr']
},
legend: {
enabled: false
},
series: [{
name: 'Really, really long series name 1',
data: [1, 4, 2, 3]
}, {
name: 'Really, really long series name 2',
data: [4, 2, 5, 3]
}, {
name: 'Really, really long series name 2',
data: [6, 5, 3, 1]
}, {
name: 'Really, really long series name 2',
data: [6, 4, 2, 1]
}]
})
});
答
使用axis.setExtremes()方法放大到一个特定的区域。
$('#zoom').click(function() {
chart.xAxis[0].setExtremes(1327449600000,1422144000000, false)
chart.yAxis[0].setExtremes(10, 20)
我会用一个线性轴代替日期时间的,其中1 = 1年的间隔时间从现在。然后,您可以将最小/最大值增加/减少1. https://jsfiddle.net/urqcwsnp/ – morganfree