我认为这是可能的,但这并不容易。
正如您所写,您应该从检测拖放开始。使用内置选项是不可能的,但我们可以添加自己的事件监听器。看看这段代码:
new Highcharts.StockChart({
// here comes your chart options, but we can pass callback function as the second parameter
}, function (chart) {
var report = document.getElementById('report'), // just an element to display current extremes
xAxis = chart.xAxis[0],
startX;
function drag(e) {
e = chart.tracker.normalizeMouseEvent(e);
startX = e.chartX;
}
function drop(e) {
e = chart.tracker.normalizeMouseEvent(e);
var delta = e.chartX - startX,
extremes = xAxis.getExtremes(),
newMin = Math.round(extremes.min - delta),
newMax = Math.round(extremes.max - delta);
// display extremes retrieved by panning
report.innerHTML = "<b>From:</b> " + new Date(newMin) + " <b>to:</b> " + new Date(newMax);
}
// bind events
Highcharts.addEvent(chart.container, 'mousedown', drag);
Highcharts.addEvent(chart.container, 'mouseup', drop);
});
只需检测 mouseDown 和 mouseUp 事件,然后计算差异,将差异转换为 x 数据,最后从极值中减去差异。
在这里您可以找到上面发布的代码的 jsfiddle 演示:http: //jsfiddle.net/dSEAA/1/