highcharts React- x轴可拖动

xkftehaa  于 2022-11-11  发布在  Highcharts
关注(0)|答案(1)|浏览(227)

有没有办法使x轴可以交互式地从左向右拖动,或者从右向右拖动?例如,百分比x轴可以从左向右拖动,或者从右向左拖动

eivnm1vs

eivnm1vs1#

首先,你需要创建或找到一些元素来作为钩子。接下来,使用mousemove来平移轴,并在mouseup事件回调中进行清理。例如:

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

相关问题