有没有办法使x轴可以交互式地从左向右拖动,或者从右向右拖动?例如,百分比x轴可以从左向右拖动,或者从右向左拖动
eivnm1vs1#
首先,你需要创建或找到一些元素来作为钩子。接下来,使用mousemove来平移轴,并在mouseup事件回调中进行清理。例如:
mousemove
const chart = Highcharts.chart('container', {...}); chart.customLine = chart.renderer.path([ 'M', chart.plotLeft, chart.plotTop, 'L', chart.plotLeft, chart.plotTop + chart.plotHeight ]).attr({ stroke: '#ff00ff', 'stroke-width': 7 }) .on('mousedown', function() { chart.isDraggingAxis = true; }) .add(); chart.container.addEventListener('mousemove', function(e) { if (chart.isDraggingAxis) { const yAxis = chart.yAxis[0]; chart.customLine.translate(e.x - chart.plotLeft); yAxis.labelGroup.translate(e.x - chart.plotLeft); } }); document.addEventListener('mouseup', function(e) { if (chart.isDraggingAxis) { chart.isDraggingAxis = false; } });
现场演示:http://jsfiddle.net/BlackLabel/jervfkoc/**API参考:**https:api.highcharts.com/class-reference/Highcharts.SVGElement#translate
1条答案
按热度按时间eivnm1vs1#
首先,你需要创建或找到一些元素来作为钩子。接下来,使用
mousemove
来平移轴,并在mouseup事件回调中进行清理。例如:现场演示:http://jsfiddle.net/BlackLabel/jervfkoc/
**API参考:**https:api.highcharts.com/class-reference/Highcharts.SVGElement#translate